2

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

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

如何实现所需的布局?谢谢!

4

2 回答 2

2

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

.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/

于 2013-01-30T13:48:18.670 回答
0

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

<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>
于 2013-01-30T13:23:57.280 回答