带显示的div中的自动换行:内联块不起作用

时间:2012-06-13 10:48:56

标签: css word-wrap

我一直试图弄清楚如何使用div-elements制作一个包含4个列的行。

第一列和第三列的宽度应为46px。第二列和第四列应为左侧的50%(如100%窗口宽度 - 46 * 2)宽。我已经意识到已经在第一个灰色框中看到了here

嗯,第二和第四列的文字可以更长,我希望它在div中打破。

第二个灰色框显示文本较长时的样子。 第三个灰色框显示另一个尝试'display:table-cell'。唯一的问题是第二列50%的宽度只是减小而第四列的宽度增加。

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

1 个答案:

答案 0 :(得分:3)

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

最重要的变化是添加table-layout: fixedWhat 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.