HTML css动态div /元素定位

Question

我制作了这个设计，其中包含两种类型的内容框，一种包含图片，另一种不包含图片。所有没有图片的盒子都有相同的尺寸。底部边距也应该像这样：

但是因为带有图片的盒子比较大，而我使用的是“浮动”，所以根据顶部最大盒子的底部边缘放置底盒，这会导致它留下很多空白之间。

有没有办法将底盒浮在小盒子下面？我试过浮动和“显示”，但似乎没有任何作用。  这是我的代码：

    <div class="contentBox">
      <div class="contentBoxHead">
      </div>

      <div class="contentBoxPicture">
        <img src=" /categoria/articulo/images/" />
      </div>

      <div class="contentBoxDescription">
        <h2 class="contentBoxDescriptionText">
        </h2>
        <h3 class="contentBoxDescriptionText">
        </h3>
      </div>
    </div>

...

.contentBox{
    width: 300px;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

我删除了与“contentBox”内部子div相关的所有CSS，因为它似乎不是问题所在。

请注意，这是针对CMS类型的网站，如果所有框都有图片，即使订单完全不同，我也会尝试以同样的方式进行此工作。因此我无法对这些职位进行硬编码。

Answer 1

我不相信只有CSS解决方案才能实现这一点。但这基本上是所谓的 masonry 布局。你可以用例如它来实现它。这个JavaScript库：http://masonry.desandro.com/

Answer 2

将包含内容的div放在一个div中，然后将div放在另一个div中。

代表。

<div class="content_description">
 <div class="content_1"></div>
 <div class="content_2"></div>
</div>
<div class="content_image">
  <img src=""></img>
</div>

然后把css放到

.content_description {
    width : 300px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;

}
.content_image {
    width: 300px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

用另一个div来覆盖所有这些，你可以在那里定义你的浮动。

Answer 3

如果您不需要对内容流进行非常精细的控制，那么您可以使用CSS列。我为你准备了一个小小的演示，在那里你可以看到没有浮动，内容是包装，高度被妥善保存。

演示：http://jsbin.com/pesoto/edit?html,css,output

玩得开心并探索CSS3功能，那里有很多好东西。 ：）