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需要多少高度。有什么方法可以声明只有一个div应该在column1之后？

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

提前致谢。

Answer 1

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

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

检查Fiddle Here.

Answer 2

只需将clear:left添加到第3个div的css：

<div style="width:47.5%; float:left; clear:left; display:inline-block">row2:column1 should come below column1</div>

JSFIDDLE

Answer 3

试试此代码

<div style="width:47.5%; float:left;">this is column1
<br>this is column1
    <br>this is column1
        <br>this is column1
</div>
<div style="width:47.5%; float:left; ">this is column2</div>
<div style="width:47.5%; float:left; clear:both;">row2:column1 should come below column1</div>

需要帮助在HTML

3 个答案: