3

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

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

使用它，我必须按照 jsfiddle 中的说明parentDiv1制作内容。parentDiv2我怎样才能做到这一点jQuery？

4

3 回答 3

2

作为替代方案，在您的部分上使用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/

于 2013-09-29T18:01:58.187 回答
0

这个jQuery做到了...

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

获取前 3 个divs 并用 new 包装它div，所以.....

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

于 2013-10-08T06:53:25.803 回答
-1

干得好 ：）

小提琴

将行更改为

.row {
    width: auto;
}
于 2013-09-29T18:07:47.087 回答