CSS：浮动div留在任意宽度的表旁边？

Question

我希望有一个表（具有任意数量的列）向左浮动，并且如果有空格则在其旁边浮动一些文本，或者如果没有则向下浮动在它下面。

<div class="table">
<table>... table with arbitrary number of columns</table>
</div>
<div class="content">
Headings and paragraph text here (in a separate column, not flowing around the table)
</div>

我希望布局如下：

我开始只是将{ float: left }应用于两个div，但它不起作用 - 第二个div始终低于第一个div。为什么？我以为float: left应该包装文字。

JSFiddle：http://jsfiddle.net/R9axt/1/

Answer 1

从float:left类中移除.visualisation-moreinfo，因为它会将其拉伸到表格左下方，而无需将display:table设置为表格

.visualisation-moreinfo {
  border: 1px solid red;
  overflow:hidden;
  /* float:left */ Removed */
}

Demo

Answer 2

请试试FIDDLE。您的CSS略有变化。可以解决你的问题。

.visualisation-table {
  border: 1px solid blue;  
  float: left;
  width: 48%;
}

.visualisation-moreinfo {
  border: 1px solid red;
  width:48%;
  float: left;
}