html - 如何实现float : top in CSS/HTML

Question

如果你能阅读标题...一个叫做 JWT，另一个叫 Alela Diane.. 我如何让“Alela Diane”填充它们之间的空间(没有双关语)

这些 div 的 CSS 属性设置为显示:内联 block 。

HTML->

<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——>

#shastra_display
{
    width: 880px;
}

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

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

Answer 1

Is it always going to be just two columns? – thirtydot

It's two columns because the width of the parent box allows only two to fit. – Zach

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

这意味着您不能“作弊”并像这样(正如@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