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

【问题标题】：Fluid layout divs with same height and table-cell style具有相同高度和表格单元格样式的流体布局 div
【发布时间】：2013-05-11 22:44:41
【问题描述】：

我需要显示一个包含 3 个 div 的大 div。布局必须是流畅的，即大 div 的高度必须适应其中 3 个 div 的内容。此外，我希望 3 个 div 具有相同的高度，并且我设法使用容器 div 的 display:table 属性和 3 个内部 div 的 display:table-cell 属性来做到这一点。然而，有一个大问题：一旦我将带有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;
}

【问题讨论】：

标签： html css fluid-layout

【解决方案1】：

尝试在 div 上使用 vertical-align，例如：

div {vertical-align:top;}

这与我们讨论过的内联块元素 here

的现象相似

这里我把你的代码 + 垂直对齐放在jsfiddle

【讨论】：