我一直在尝试弄清楚如何使用 div 元素创建具有 4 列的行。
第一列和第三列的宽度应为 46 像素。第二列和第四列的宽度应为左侧位置的 50%(如 100% 窗口宽度 - 46*2)。我意识到,正如你所看到的 here在第一个灰色框中。
嗯,第二列和第四列的文本可以更长,我希望它在 div 中中断。
第二个灰色框显示文本较长时的外观。 第三个灰色框显示您再次尝试“display:table-cell”。唯一的问题是第二列 50% 的宽度只是减小,而第四列的宽度却增加了。
我需要两列具有相同的宽度。你知道我如何实现它吗? 先感谢您。
最佳答案
我决定调整您的 display: table-cell
版本。
最重要的变化是添加table-layout:fixed
。 What that does在没有指定宽度
的情况下,在列之间平均分配剩余的可用宽度。
参见: 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>
关于css - div 中的自动换行并显示 :inline-block doesn't work,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11013279/