在另一层周围浮动一组div而不会产生间隙

Question

我很难创建一个特定的布局，如果它真的有用，我就不太确定了。基本上，我有一个内容区域和一个带有大量摘要的侧边栏，这些框具有不同的高度，具体取决于内容。

摘要的布局应与pinterest相似，最好从左到右。现在棘手的部分是，如果空间允许，这些摘要应该在内容区域周围。因此，如果右边的边栏已填满，并且内容区域已结束，则以下摘要应位于内容下方，而不是右侧。

HTML基本上应该是这样的：

<div class="page">

    <div class="content">
        <h2>CONTENT</h2>
        <p>Lorem ispsum bla bla bla</p>
    </div>

    <div class="sidebar">

        <div class="abstract"></div>
        <div class="abstract"></div>
        <div class="abstract"></div>
        <div class="abstract"></div>

        ... etc ...

    </div>

</div>

那么真正重要的是，“内容”图层和“侧边栏”图层应该不嵌套！

为了更好地说明问题，这里有一些图片：

我尝试使用好的旧浮动创建布局，这就是我得到的：

因此浮动确实包裹了内容，但留下了一些非常难看的空白。

但是我想要更像这样的东西，以便布局没有这些间隙，但试图尽可能地填充它们：

任何想法如何做到这一点，也许使用更高级的CSS3，最好不要通过Javascript进行布局？也尝试使用flexbox，但到目前为止还无法创建这样的布局，所以任何帮助/想法都将非常感激。

编辑创建了一个小提琴，以便您可以看到整个内容：http://jsfiddle.net/Jtwb6/

Answer 1

别忘了清除以下div

clear:both;

只需将你的css中的内容添加到以下div中，我认为它应该有效。