html - 需要帮助在 HTML 中设置两列布局

Question

您好，我正在尝试在 HTML 中设置两列布局。当第一列的内容增长超过一行时，我遇到了问题。在这种情况下，应该位于该下方的 div 将移至下一列，因为那里有可用空间。这是更清晰的链接和代码 http://jsfiddle.net/9xp1sj05/1/

<div style="width:47.5%; float:left; display:inline-block">this is column1 with
    <br>a break tag to show it has
    <br>bigger hieght</div>
<div style="width:47.5%; display:inline-block">this is column2</div>
<div style="width:47.5%; float:left; display:inline-block">row2:column1 should come below column1</div>

我可以为 column2 指定行高，但在我的例子中，我必须在加载 div 中的实际内容之前设置列布局。所以我不知道 column1 需要多少高度。有什么方法可以声明在 column1 之后只有一个 div 吗？？

请注意，这只是一个示例，在实际用例中，有超过 10 行是动态加载的。

提前致谢。

Answer 1

删除 float:left 并为每个 div 提供 vertical-align: top; 将解决您的问题。

style="width:47.5%; display:inline-block; vertical-align: top;"

检查 Fiddle Here.