jQuery + CSS - 其中第4个div在第3个div下，在一行中包含3个div，在第4行包含第4个div

Question

我有一个ASP.Net-MVC视图，如果数据可用于该部分，则动态添加div 。 要求是单个线路应该容纳3个div 。

看看这个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>

问题是，文本内容不是固定长度。 因此，第四个div取代了第三个div 。 要解决这个问题，我可以拥有这样的CSS类。

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

使用这个，我必须将parentDiv1的内容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">');

得到前3个div并用新div包裹它，所以......

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

Answer 3

干得好 ：）

小提琴

将行更改为

.row {
    width: auto;
}