如何实现浮动：CSS / HTML中的top

问题描述

| 如果您可以阅读标题...一个叫JWT，另一个叫Alela Diane ..我怎么得到\“ Alela Diane \\”来填充它们之间的空间（无双关语） 这些div的CSS属性设置为显示：inline-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;
}

    

解决方法

  总是只有两个吗   列？ –三十点      这是两列，因为   父框只能容纳两个。   –扎克 因此，列数根据浏览器宽度而变化。 这意味着您不能\“作弊\”并像下面这样（由@Stefy建议）： http://jsbin.com/atimu4 除了固定数量的列之外，CSS无法做到。请参阅以下答案以比较这些想法： 高度可变的CSS浮动Divs 您将必须使用JavaScript。已经有一个方便的jQuery插件：jQuery Masonry 一些有趣的演示： http://masonry.desandro.com/demos/animating-jquery.html http://masonry.desandro.com/demos/adding-items.html     ,您可能应该使用2列模板才能正确显示项目。