jquery - jQuery + CSS - 4 番目の div が 3 番目の div の下にある場合、3 番目の div を 1 行でラップし、4 番目の div を次の行でラップします。

Question

divそのセクションでデータが利用可能な場合、動的に追加する ASP.Net-MVC ビューがあります。要件は、3div秒を 1 行に収容することです。

これを見てくださいhttp://jsfiddle.net/tKKDY/4/

私はこのCSSを持っています

.section {
    border: 1px solid Red;
    width: 150px;
    float: left;
}

そして、このようなhtml

<div class='section'>hello</div>
<div class='section'>
  hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class='section'>hello</div>
<div class='section'>fourth hello</div>
<div class='section'>hello</div>

問題は、テキストの内容が固定長ではないことです。そのため、4 番目divは 3 番目の下に配置されdivます。これを修正するために、CSSこのようなクラスを持つことができます。

.row {
    width: 100%;
    float: left;
}

これを使用して、jsfiddle で説明されているparentDiv1ように内容を作成する必要があります。parentDiv2を使用してこれを達成するにはどうすればよいjQueryですか?

Answer 1

display: inline-block別の方法として、セクションの代わりに使用すると、次のfloat: leftものが不要になります.row。

.section {
    border: 1px solid Red;
    width: 150px;
    display: inline-block;
    vertical-align: top;
}

更新された JSFiddle: http://jsfiddle.net/tKKDY/5/

Answer 2

このjQueryはそれを行います...

$('#parentDiv1').filter(':visible').find(':lt(3)').wrapAll('<div class="row">');

get の最初の 3 divs を new でラップするdivので、.....

http://jsfiddle.net/tKKDY/7/

Answer 3

どうぞ ：）

フィドル

行を変更

.row {
    width: auto;
}