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 に答える