使用jQuery或CSS放置未知高度

Dynamic divs

本 - 每個格在服務器上顯示的順序產生並具有未知高度：

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled</title> 
    <style type="text/css"> 
    div {width:100px;color:white;background-color:grey;border:solid 5px black; margin:2px} 
    .wrapper {width:331px;height:400px;border:solid 1px black;float:left;} 
    </style> 
    </head> 
<body> 
    <form id="form1" runat="server"> 
    <div class="wrapper"> 
    <div class="shortDiv" style="float:left;">1 some stuff</div> 
    <div class="tallDiv" style="float:left;">2 some stuff some stuff</div> 
    <div class="shortDiv" style="float:left;">3 some stuff</div> 
    <div class="shortDiv" style="float:left;">4 some stuff</div> 
    <div class="shortDiv" style="float:left;">5 some stuff</div> 
    <div class="shortDiv" style="float:left;">6 some stuff</div> 
    <div class="tallDiv" style="float:left;">7 some stuff some stuff</div> 
    <div class="shortDiv" style="float:left;">8 some stuff</div> 
    <div class="shortDiv" style="float:left;">9 some stuff</div> 
</div> 
    </form> 
</body>

來源

2011-04-19 mplungjan

我正想寫一個較長的答案，但它的要點是使用jQuery砌體的背景下定義，這只是張貼。欲瞭解更多信息，請參閱：http://stackoverflow.com/search?q=user%3A405015+masonry - 特別是：http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights/ 5234858＃5234858如果是固定數量的列，您可以做@Cristian說的，但在這裏看起來並不是這樣。 – thirtydot 2011-04-19 14:29:12

@thirty @cristian @Alex - 似乎與[CSS Floating Divs At Variable Heights]一樣（http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights/5234858#5234858）當我發佈時我沒有看到。我正在投票結束。謝謝 – mplungjan 2011-04-19 14:32:37