0

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

1 回答 1

1

尝试vertical-align在 div 上使用,例如:

div {vertical-align:top;}

这与我们在此处讨论的 inline-block 元素的现象相似

在这里,我将您的代码 + 垂直对齐放在jsfiddle上

于 2013-05-11T14:44:41.050 回答