我需要显示一个大 div,里面有 3 个 div。布局必须是流动的,即大 div 的高度必须适应其中 3 个 div 的内容。此外,我希望 3 个 div 具有相同的高度,并且我设法使用display:table
容器 div 的display:table-cell
属性和 3 个内部 div 的属性来做到这一点。然而,有一个大问题:一旦我margin-top:
在三个 div 中的第一个中放置一个带有 a 的 div,它就会向下移动其他两个 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;
}