如何实现float：CSS / HTML中的top

Question

如果你能阅读标题...一个叫JWT，另一个叫Alela Diane ..我如何让“Alela Diane”填补他们之间的空间（没有双关语）

这些div的CSS属性设置为：inline-block。

HTML - ＆gt;

<div id="shastra_display">

<div class="shastra_post">
  There are multiple div's like this containing the Alela Diane's and JWT's etc.
</div> 

</div>

CSS - ＆gt;

#shastra_display
{
    width: 880px;
}

#shastra_display div
{
    display: inline-block;
    vertical-align: text-top;
}

.shastra_post
{
    width: 270px;
    background-color: light-grey;
}

Answer 1

  

它总是只有两个   列？ - thirtydot

     

这是两列因为宽度   父框只允许两个适合。    - 扎克

因此，列数会根据浏览器宽度而变化。

这意味着你不能“欺骗”并像这样做（正如@Stefy所建议的那样）：

• http://jsbin.com/atimu4

除了固定数量的列，CSS无法做到。有关这些想法的比较，请参阅此答案：

• CSS Floating Divs At Variable Heights

您必须使用JavaScript。已有一个方便的jQuery插件：jQuery Masonry

一些有趣的演示：

• http://masonry.desandro.com/demos/animating-jquery.html
• http://masonry.desandro.com/demos/adding-items.html

Answer 2

您应该使用2列模板才能正确显示项目。