html - 具有相同高度和表格单元格样式的流体布局 div

Question

我需要显示一个大的 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;
}

Answer 1

尝试在 div 上使用 vertical-align，例如像这样:

div {vertical-align:top;}

这与我们讨论过的行内 block 元素相似here

这里我把你的代码 + vertical-align 放在 jsfiddle 上