HTML css动态div/元素定位

我做了这个设计，它包含两种类型的内容框，一种包含图片，另一种不包含图片。所有没有图片的盒子大小都相同。底部边距也应该相等，如下所示：

但是因为有图片的盒子更大，我使用的是“float”，所以底部的盒子是根据顶部最大盒子的底部边距放置的，这使得它在中间留下了很多空白

有没有办法把底部的盒子放在小盒子下面？我尝试过浮动和“显示”，但似乎没有任何效果。 这是我的代码：

    <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”的内部子div相关的CSS，因为这里似乎没有问题

---

请注意，这是一个CMS类型的网站，我试图使这一工作相同的方式，如果所有的框有图片或没有，即使顺序是完全不同的。由于这个原因，我无法对位置进行硬编码。

我不相信仅使用CSS解决方案就可以实现这一点。但这基本上就是所谓的砌体布局。例如，您可以通过以下JavaScript库来实现这一点：

将包含内容的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>

---

用另一个div覆盖所有这些，在这个div中定义左浮动

如果不需要很好地控制内容流，那么可以使用CSS列。我为你们准备了一个小演示，在这里你们可以看到并没有浮动，内容是包装的，高度是适当保留的

演示：

---

享受乐趣，探索CSS3功能，这里有很多好东西。：）

非常感谢，效果很好！虽然我努力避免使用大量的js，但似乎没有其他方法。

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

.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;
}