内部に 3 つの div がある 1 つの大きな div を表示する必要があります。レイアウトは流動的でなければなりません。つまり、大きな div の高さは、その中の 3 つの div の内容に適応する必要があります。さらに、3 つの div を同じ高さにしたいのですがdisplay:table、コンテナー div のdisplay:table-cellプロパティと 3 つの内部 div のプロパティを使用してそれを行うことができました。それにもかかわらず、大きな問題があります。3 つの divmargin-top:の最初の div の内側に a を含む div を配置するとすぐに、他の 2 つの div のコンテンツが下に移動します。理由が本当にわかりません。どんな助けでも大歓迎です。
html と css コードは次のとおりです。
<div id="body">
<div id="left-box">
<div id="left-container">
LEFT LEFT LEFT LEFT LEFT LEFT
</div>
</div>
<div id="central-box">
<div id="central-container">
CENTRAL CENTRAL CENTRAL CENTRAL CENTRAL
</div>
</div>
<div id="right-box">
<div id="right-container">
RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
</div>
</div>
</div>
CSS:
#body {
width:80.9%;
margin:0 auto 0 auto;
height:auto;
/*background-color:#0F3;*/
display:table;
}
#left-box {
height:100%;
width:60%;
background-color:red;
display:table-cell;
border-right:1px solid #000;
}
#left-container {
background-color:#0CF;
width:72%;
margin-top:82px;
margin-left:2%;
}
#central-box {
background-color:#00F;
display:table-cell;
border-right:1px solid #000;
width:20%
}
#central-container {
margin-top:0px;
float:left;
background-color:#FF0;
}
#right-box {
background-color:#0C0;
display:table-cell;
border-right:1px solid #000;
width:19%;
}
#right-container {
margin-top:0px;
background-color:#FF0;
}