我正在尝试实现以下布局:
+--------------------+ +-------------------+ +--------------------+
| Right column with | | small center with | | Right column with |
| multiple lines and | | fixed width | | multiple lines and |
| width of | | | | width of |
| (100%-center)/2 | | | | (100%-center)/2 |
+--------------------+ +-------------------+ +--------------------+
但是使用我当前的标记,一旦内容变得太大而无法容纳该行,右列将移到其余列下方,而不是在其内部引入换行符:
+--------------------+ +-------------------+
| Right column with | | small center with |
| multiple lines and | | fixed width |
| width of | | |
| (100%-center)/2 | | |
+--------------------+ +-------------------+
+-------------------------------------------+
| Right column with multiple lines and... |
+-------------------------------------------+
这是我当前的标记:
<div style="text-align: center;">
<span style="float: left;">left</span>
<span>center</span>
<span style="float: right;">right</span>
</div>
怎样才能达到想要的布局?谢谢!
最佳答案
您可以在不修改标记的情况下执行此操作:
.container {
display: table;
}
.container span {
display: table-cell;
}
<div class="container">
<span>left</span>
<span>center</span>
<span>right</span>
</div>
关于html - 三列,内部自动换行,但元素之间没有换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14604460/