html - 显示 :Table-Cell width issues

Question

我已经为三列布局设置了固定的像素宽度值，并希望使用 display:table-cell 属性，以便列始终对齐列 div 的高度内容。

我以前使用过这种技术没问题，但现在我似乎无法修复列宽，相反，如果 div 中的内容增加，它会使 div 变宽而不是变高，同时这压缩了相邻单元格的宽度。显然我使用 table-cell 的全部目的是阻止这种情况发生，任何人都可以看到是什么阻止了列宽的工作吗？在 JSFiddle 中，宽度最初看起来是正确的，但如果您将额外的文本添加到任何列中，您将看到它没有像我需要的那样响应。

JSFiddle here

下面的 html/css 根据上面的 JSFiddle:

<div class="container">
<div class="fwcol">
    <div class="col">
        <div class="thirds">COLUMN1</div>
        <div class="thirdm">COLUMN2</div>
        <div class="thirds">COLUMN3</div>
    </div><!--col-->
</div><!--fwcol-->
</div><!--container-->

.container {
    margin: 0 auto;
    width: 966px;
    background:red;
    overflow:hidden;
}
.fwcol {
    float: left;
    width: 966px;
}
.col {
    width:966px;
    display:table;
    border-collapse:separate;
    border-spacing:20px;
}
.thirds, .thirdm {
    display: table-cell;
    padding: 20px;
    background: #FFF;
}
.thirds {
    width: 255px;
}
.thirdm {
    width: 256px;
}

Answer 1

将这两个属性添加到 .col 类:

display:table;
table-layout:fixed;

您还可以将 "word-wrap:break-word;" 添加到子 div 以防止溢出。