css - 保持两个 div 的长度相同

Question

我有两个 div，主要和侧面，我想确保保持较长的长度。

目前，主要比侧面长，我怎样才能让它们保持相同的高度，具体取决于内容？

#main{
width:818px;
padding:20px;
float:left;
background-color:white;
border-top-left-radius:20px;
border-left:1px solid #909090;
border-top:1px solid #909090;
}

#side{
float:left;
width:230px;
padding:20px;
background-color:#FEF5CA;
border-top:1px solid #909090;
border-right:1px solid #909090;
}

谢谢。

Answer 1

display: table-cell;

CSS3 是你的朋友 ;-)

Answer 2

为了使用 display: table-cell 你需要从你的 main 和 side 中删除 float 属性。然后添加 display: table-cell 到两者，它会做你想要的。

Answer 3

将表格布局替换为 div 最好的方法是什么？

使用 display 属性重新格式化所有内容，如表格。;)

HTML

<div class="table-div" style="width:100%">
    <div class="tr-div">
        <div class="td-div">td-div 1a</div>
        <div class="td-div">td-div 2a</div>
        <div class="td-div">td-div 3a</div>
    </div>
    <div class="tr-div">
        <div class="td-div">td-div 1b</div>
        <div class="td-div">td-div 2b</div>
        <div class="td-div">td-div 3b</div>
    </div>
</div>

CSS

.table-div{display:table}
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}

jsFiddled 在这里http://jsfiddle.net/sPm9M/

Answer 4

您也许可以将它们分别放在班级中。这将确保您的所有属性都相同。你也可以这样做：

CSS

    #main,#side {
    width: //the width
    }

    #main {
    width:818px;
padding:20px;
float:left;
background-color:white;
border-top-left-radius:20px;
border-left:1px solid #909090;
border-top:1px solid #909090;
    }

    #side {
    float:left;
width:230px;
padding:20px;
background-color:#FEF5CA;
border-top:1px solid #909090;
border-right:1px solid #909090;
    }