1 Divの中に2 Divを挿入する（左側に1つ、右側にもう1つ）

-1

私はCSSのノブで、CSSとDIVSで遊んでいました。 1。私は別のものの中に1つのdivを入れることができますが、私は2つだけバグを入れます。1 Divの中に2 Divを挿入する（左側に1つ、右側にもう1つ）

<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="style_divs.css"> 
</head> 
<body> 
<div id="table"> 
    <div id="year">2017</div> 
    <div id="month"> 
     <div id="previousMonth">Previous</div> 
     <div id="nextMonth">Next</div> 
     January 
    </div> 
</div> 
</body> 
</html>

CSS

#table{ 
    width:25%; 
    height:50%; 
    background-color: red; 
    margin: 0 auto; 
} 

#year{ 
    width:100%; 
    height:10%; 
    background-color: blue; 
    margin: 0 auto; 
    text-align: center; 
} 
#month{ 
    width:100%; 
    height:10%; 
    background-color: yellow; 
    margin: 0 auto; 
    text-align: center; 
} 

#previousMonth{ 
    width:12%; 
    height:100%; 
    background-color: green; 
    margin-left: 0%; 
    text-align: center; 
} 

#nextMonth{ 
    width:12%; 
    height:100%; 
    background-color: cyan; 
    margin-left: 88%; 
    text-align: center; 
}

ありがとう： I could put the green Div inside of yellow div but not the cyan

は、ここに私のHTMLです。左と#nextMonthフロート：

出典

2017-02-27 Lucas Gomes

'divs'で' float'を試しましたか？ –

あなたの実際の質問は何ですか？ –

うわー、ありがとう。私は今、とても馬鹿だと感じています。 –

最善のアプローチは#previousmonthフロートを使用することで、右

あなたは、以下、これを達成するためにマージン機能を使用しないでくださいフロートコマンドに

#previousMonth{ 
width:12%; 
float:left; 
height:100%; 
background-color: green; 
text-align: center; 
} 

#nextMonth{ 
width:12%; 
height:100%; 
float:right; 
background-color: cyan; 
text-align: center; 
}

を用いて補正2つのスタイルであります

出典

2017-02-27 15:05:24

body{ 
 
height:500px; 
 
width:600px; 
 
} 
 
#table{ 
 
width:50%; 
 
height:70%; 
 
background-color: red; 
 
margin: 0 auto; 
 
} 
 

 
#year{ 
 
width:100%; 
 
height:10%; 
 
background-color: blue; 
 
margin: 0 auto; 
 
text-align: center; 
 

 
} 
 
#month{ 
 
width:100%; 
 
height:10%; 
 
background-color: yellow; 
 
margin: 0 auto; 
 
} 
 

 
/*wrapped them in div so they can be one group*/ 
 
#pager{ 
 
height:100%;/*tells the pager to take 100% of parent's height(month)*/ 
 
} 
 
#pager div{/*tells the child divs of pager to have same properties*/ 
 
display:inline-block;/*this will display contents side by side one another*/ 
 
width:12%; 
 
height:100%; 
 
} 
 

 
#previousMonth{ 
 
background-color: green;/*assign properties that are unique to the child*/ 
 
} 
 

 
#nextMonth{ 
 
background-color: cyan; 
 
float:right; /* this will make it float to right */ 
 
} 
 
#monthname{ 
 
text-align:center; 
 
}

<body> 
 
<div id="table"> 
 
    <div id="year">2017</div> 
 
    <div id="month"> 
 
     <div id="pager"> 
 
     <div id="previousMonth">Previous</div> 
 
     <div id="nextMonth">Next</div> 
 
     </div> 
 
     <div id="monthname">January<div/> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body>

私はあなたのコードに少し手を加えています。要素に何をすべきかを伝える必要があります。また、親のプロパティを継承するので、同じコードを子供に書かないようにしてください。 F12キーを押すと、レンダリング時に要素の持つプロパティがわかります。お役に立てれば。幸運と幸せなコーディング。

出典

2017-02-27 15:33:11 jmag

1 Divの中に2 Divを挿入する（左側に1つ、右側にもう1つ）

答えて

関連する問題