我需要显示一个大的 div,里面有 3 个 div。布局必须是流畅的,即大 div 的高度必须适应其中 3 个 div 的内容。此外,我希望这 3 个 div 具有相同的高度,我设法通过容器 div 的 display:table
属性和容器 div 的 display:table-cell
属性做到了这一点3个内部div。尽管如此,还是有一个大问题:一旦我将带有 margin-top:
的 div 放入三个 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;
}
最佳答案
尝试在 div 上使用 vertical-align
,例如像这样:
div {vertical-align:top;}
这与我们讨论过的行内 block 元素相似here
这里我把你的代码 + vertical-align 放在 jsfiddle 上
关于html - 具有相同高度和表格单元格样式的流体布局 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16498212/