6


こんにちは！ここに問題があります。高さの異なる複数 (最大 5 つ) の div があります。これらの div 内にはポートレットがあり、高さを増やすことができます。簡単な例を次に示します。

.clz {
  float: left;
}
<div class="container">
  <div class="clz">1111111111<br/>1111111111</div>
  <div class="clz">2222222222<br/>2222222222<br/>2222222222</div>
  <div class="clz">3333333333<br/>3333333333</div>
  <div class="clz">4444444444<br/>4444444444</div>
</div>

ここに JSFiddle があります。ここで確認できます。

ブラウザ ウィンドウの幅を小さくすると、divs が折り返されます。これは非常に優れています。悪い点4444444444は2222222、ページの先頭に落ちないということです。

1111111 2222222 333333
1111111 2222222 333333
        2222222 444444
                444444

4444444望ましい動作は、完全に別の行でページの先頭に配置されたときにラップが発生することです。

1111111 2222222 333333
1111111 2222222 333333
        2222222
4444444
4444444
4

4 に答える 4

9

これにはdisplay:inline-tableを使用できます。次のように書きます。

.clz{
    display:inline-table;
}

これをチェックしてくださいhttp://jsfiddle.net/eGawU/13/

IE8以上までです

于 2012-08-29T12:13:29.457 に答える
0

フロートを取り外します。デモhttp://jsfiddle.net/eGawU/17/

于 2012-08-29T12:17:48.887 に答える
0

clz次のように、最初の3つのdivを別のdivでラップしてみることができます。

<div class="container">
    <div class="clz">
        <div class="clz">1111111111<br/>1111111111</div>
        <div class="clz">2222222222<br/>2222222222<br/>2222222222</div>
        <div class="clz">3333333333<br/>3333333333</div>
    </div>
    <div class="clz">4444444444<br/>4444444444</div>
</div>​

これにより、div 4は希望どおりに動作しますが、列を追加する場合は、さらにdivをネストする必要があります。

于 2012-08-29T12:18:00.430 に答える
0

cssのClearPropertyを使用する

これを試してくださいhttp://jsfiddle.net/gajjuthechamp/eGawU/18/

また

あなたはあなたが壊したい下に余分なdivを追加することができます

これを試してくださいhttp://jsfiddle.net/gajjuthechamp/eGawU/19/

于 2012-08-29T12:18:22.980 に答える