使用 display: table-cell 创建两列布局答案

【问题标题】：Using display: table-cell to create two column layout使用 display: table-cell 创建两列布局
【发布时间】：2015-02-01 22:57:29
【问题描述】：

我正在尝试使用 display:table-cell 创建一个两列布局，其中两列的高度相同，该高度由最大列的内容决定。但是，内容较少的 div 不会拉伸到与另一个相同的高度，我不知道为什么。

<div class="col">
    <div class="ttl">
        <p>Column 1 Content Column 1 Content.......</p>
    <div class="otr">
        <p>Column 2</p>
    </div>
</div>

我的css如下：

.col {
    width:966px;
    display:table;
}
.ttl {
    float:left;
    margin-left:20px;
    padding:20px;
    width: 571px;
    background: #FFF;
    display: table-cell;
}
.otr {
    float: left;
    margin-left: 20px;
    padding: 20px;
    width: 255px;
    background: #FFF;
    display: table-cell;
}

【问题讨论】：

Seems to work。但是，您忘记关闭您的第一个孩子</div>。
@Vucko No it doesn't，而不是当一个内容比另一个内容长时。
@MilindR 从子 divs 中删除 float 属性，它将起作用。
@Vucko 哎呀你确实先说...我该怎么办？

标签： html css

【解决方案1】：

罪魁祸首是float: left。 Removing it 解决问题。

html,body{width:100%;margin:0}

.col {
    width:966px;
    display:table;
}
.ttl { width: 571px; background: red; }
.otr { width: 255px; background: blue;}

.ttl, .otr {
   margin-left:20px;
   padding:20px;
   display: table-cell;
}

我还对您的 CSS 代码进行了重复数据删除。

【讨论】：