需要幫助來設置HTML中的兩列布局

嗨我想在HTML中設置一個兩列布局。當第一列的內容增長超過一行時，我面臨問題。在那種情況下，應該低於這個值的div移動到下一列，因爲空間在那裏可用。這裏是爲了更清楚 http://jsfiddle.net/9xp1sj05/1/需要幫助來設置HTML中的兩列布局

<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個動態加載的行。

在此先感謝。

來源

2015-05-25 user2955495

請您所需佈局的樣子，它是完全不清楚一個抽象的圖像。 – connexo

你想第一個div下的第二個div？那麼只需使用內聯屬性或者如果錯誤，然後讓我知道更多關於你的問題。 –

只需添加clear:left到第三div的CSS：

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

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

來源

2015-05-25 09:25:04

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

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

檢查Fiddle Here.

來源

2015-05-25 09:27:17 ketan

非常感謝它對我很好:) 只是想知道是否有一種方法，我可以將column2的內容相對於column1垂直居中？我試圖避免行高，因爲我不能給出具體的數字 – user2955495

@ user2955495我認爲你可以嘗試從http://codepen.io/edge0703/pen/iHJuA – ketan

試試這個代碼

<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>

來源

2015-05-25 09:35:28 Niks

需要幫助來設置HTML中的兩列布局

回答

相關問題