的jQuery + CSS - ，其中第四DIV是根據第三格來，包裹在一個線3的div，以及第四 - 對下一行

我有一個ASP.Net-MVC視圖，它動態地將div，如果數據是可用於部分。的要求是這樣的，3個div S的關係被容納在單行。的jQuery + CSS - ，其中第四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內容爲parentDiv2中的jsfiddle解釋。我怎樣才能達到這個使用jQuery？

來源

2013-09-29 Paritosh

作爲替代方案，使用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-29 18:01:58

感謝@保羅，我會試試這個.. – Paritosh

-1

在這裏你去:)

fiddle

改變行

.row { 
    width: auto; 
}

來源

2013-09-29 18:07:47 Anobik

謝謝Anobik。我認爲我們錯誤地交流了。我只是使用'row'類，以便第四個'div' - 具有'section'類 - 在下一行代替它。 – Paritosh

究竟哪裏需要放置第四個div？ – Anobik

正如我已經在我的jsfiddle中展示的那樣 - 在結果中的註釋之下< - 這就是它應該看起來的樣子 - >在下一行中 – Paritosh

這個jQuery做它...

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

獲取的第3個div S和新div包裝，所以.....

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

來源

2013-10-08 06:53:25 Paritosh

的jQuery + CSS - ，其中第四DIV是根據第三格來，包裹在一個線3的div，以及第四 - 對下一行

回答

相關問題