Question

我正在尝试实现以下布局：

 +--------------------+  +-------------------+ +--------------------+ 
 | 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>

如何实现所需的布局？谢谢！

Answer 1

您可以在不修改标记的情况下执行此操作：

.container {
    display: table;
}
.container span {
    display: table-cell;
}

<div class="container">
    <span>left</span>
    <span>center</span>
    <span>right</span>
</div>

http://jsfiddle.net/R3X4q/

Answer 2

对我来说看起来像一张桌子？

<div style="text-align: center;">
    <table style="width:100%;border-spacing:0px;">
        <tr>
            <td style="float: left;">left</td>
            <td style=" width: 100px; margin: 0 auto auto auto;">center</td>
            <td style="float: right;">right</td>
        </tr>
    </table>
</div>

三列内有自动换行但元素之间没有换行符

2 个答案: