需要幫助來設置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>

我可以將line-height賦予column2，但就我而言，我必須在加載div中的實際內容之前設置列布局。 所以我不知道column1需要多少高度。 有什么方法可以聲明column1之后僅應有一個div？

請注意，這只是一個示例，在實際使用情況下，動態加載的行超過10條。

提前致謝。

Answer 1

刪除float:left並給vertical-align: top; 每個div都會解決您的問題。

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

在這里檢查小提琴。

Answer 2

只需在第3個div的CSS處添加clear:left ：

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

https://jsfiddle.net/9xp1sj05/2/

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>