1

目的: このように div を隣同士に浮かせたいと思います。

http://jsfiddle.net/x8Abc/1/

.post {
   float:left;
   padding:10px;
   margin:5px;
   border:1px solid #000;
   width:25%;
}

問題:中間の div に長いコンテンツがある場合、その下の div がこのように横に押し出されます。

http://jsfiddle.net/W3afJ/

.post {
   float:left;
   padding:10px;
   margin:5px;
   border:1px solid #000;
   width:25%;
}

jsfiddle.net/x8Abc/1/ のような均一で十分に詰め込まれたレイアウトを実現するにはどうすればよいですか?

4

2 に答える 2

3

この状況で使用する必要がありますdisplay: inline-block。

css を次のように修正します。

.post {
   display: -moz-inline-stack;
   display: inline-block;
   *display: inline;
   padding: 10px;
   margin: 5px;
   border: 1px solid #000;
   width: 25%;
   zoom: 1;
}

ここにもフィドルがあります

ブロックを垂直方向に整列するには、vertical-aligncss プロパティを変更します。

.post {
   display: -moz-inline-stack;
   display: inline-block;
   *display: inline;
   padding: 10px;
   margin: 5px;
   border: 1px solid #000;
   width: 25%;
   zoom: 1;
   vertical-align: top;
}

display: inline-blockIE で作業する方法の詳細については (上記で行ったように)、ここを参照してください。

https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

于 2013-04-02T13:59:10.953 に答える
2

いくつかのオプションがあります。

  1. 各投稿に固定の高さを与え、オーバーフロー プロパティを に設定しautoます。これにより、（明らかに）それぞれが同じ高さになることが保証されるため、兄弟の隣に浮かぶ問題は回避されdivますが、テキストが多い s にはスクロールバーが追加され、テキストが少ないものの下には空白スペースが追加されます（参照してください）ここに):

    .post {
    float: left;
    padding:10px;
    margin:5px;
    border:1px solid #000;
    width:25%;
    height: 250px;
    overflow: auto;
 }

  2. 投稿のレイアウトに固執しfloat、各行の最初の投稿がクリアされていることを確認してください (実際の投稿を参照してください) 。それは次のように達成できます*：

    .post:nth-child(3n + 1) { clear:both; }

  3. inline-block次のように、使用する投稿をレイアウトするアプローチを変更します。

    .post {
    display: inline-block;
    padding:10px;
    margin:5px;
    border:1px solid #000;
    width:25%;
 }

ここに元の例のフォークがあります。このアプローチを使用することをお勧めします。これにより、適切と思われるように投稿を縦に並べることができ、オプション 1 のように各コピーの量を制限しないためです。古いブラウザでも動作するようにします。

* IE<9 はnth-child疑似クラスをサポートしないことに注意してください。そのため、これらのブラウザーには JavaScript フォールバックが必要です。

于 2013-04-02T14:08:10.143 に答える