Question

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

我有这个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的内容设为parentDiv2，如jsfiddle中所述。如何使用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

你走了:)）

fiddle

将行更改为

.row {
    width: auto;
}

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

3 个答案: