9

いくつかのインライン ブロックを水平方向に中央揃えにしたいのですが、同時にそれらを最後の行の左に揃えます (以下を参照)。

問題は、私がこのようなことを達成したことです( http://jsfiddle.net/5JSAG/ ):

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  2  |       |
|       |_____| |_____|       |
|            _____            |
|           |     |           |
|           |  3  |           |
|           |_____|           |

私はこのようなものが欲しいのですが：

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  2  |       |
|       |_____| |_____|       |
|        _____                |
|       |     |               |
|       |  3  |               |
|       |_____|               |

http://jsfiddle.net/5JSAG/でサンプル HTML を確認できます。

column-countandを使用してみcolumn-widthましたが、ブロックの順序が変わるため、思い通りに動作しません。

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  3  |       |
|       |_____| |_____|       |
|        _____                |
|       |     |               |
|       |  2  |               |
|       |_____|               |
4

2 に答える 2

3

この問題に対する非常に簡単な解決策が見つかりました。最後にいくつかのフィラー div を追加するだけです。これは、整列されたブロックと同じ幅です。

http://jsfiddle.net/5JSAG/34/

HTML:

<div style="text-align:center">
    <div class="entry">1</div>
    <div class="entry">2</div>
    <div class="entry">3</div>
    <div class="entry">4</div>
    <div class="entry">5</div>
    <span class="fill"></span>
    <span class="fill"></span>
    <span class="fill"></span>
    <span class="fill"></span>
</div

CSS:

.fill
{
    display:inline-block;
    width:100px;
    height:0px;
    line-height:0px;
    font-size:0px;
}

.entry 
{ 
    display:inline-block;
    margin-top:10px;
    width:100px;
    height:60px;
    padding-top:40px;
    border:1px solid red;
}
于 2013-05-07T13:09:35.647 に答える
1

ここでは、それらを浮かせることが最善の選択肢のようです。左右にスペースが必要な場合は、コンテナーに左右のマージンを配置するか、コンテナーに幅と自動の左右のマージンを与えることができます。

これを順序なしリストとしてマージンする価値があるようにも見えます。

次に例を示します。

http://codepen.io/anon/pen/Ehgdp

于 2013-05-04T14:10:25.800 に答える