css - 在显示 :inline-block doesn't work 的 div 中自动换行

Question

我一直在尝试弄清楚如何使用 div 元素将 4 列排成一行。

第一列和第三列的宽度应为 46 像素。第二列和第四列应该是左边位置的 50%(比如 100% 窗口宽度 - 46*2)宽。正如你所见，我已经意识到了 here在第一个灰色框中。

好吧，第二列和第四列的文本可以更长，我希望它在 div 中中断。

第二个灰色框显示了文本较长时的外观。第三个灰色框向您展示了“display:table-cell”的另一次尝试。唯一的问题是，当第四列的宽度增加时，第二列的 50% 的宽度刚好减小。

我需要两列具有相同的宽度。你知道我如何实现它吗？先感谢您。

Answer 1

我决定调整您的display: table-cell 版本。

最重要的变化是添加了table-layout: fixed。 What that does在没有指定 width 的列之间平均分配剩余的可用宽度。

参见: http://jsfiddle.net/thirtydot/5p5V9/2/

CSS:

.outer {
    color: #ffffff;
    background-color: #373737;
}

.inner {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.inner > div {
    display: table-cell;
}
.alignC {
    text-align: center;
    font-weight: bold;
    color: #949494;
    background-color: #2e2e2e;
}
.first, .alignC {
    width: 46px;
    font-weight: bold;
}

.alignR, .alignL {
    background: #666;
}​

HTML:

<div class="outer">
    <div class="inner">
        <div class="first">1</div>
        <div class="alignR">r</div>
        <div class="alignC">m</div>
        <div class="alignL">This long text shall break in the div</div>
    </div>
</div>

Browser support for display: table-cell.