CSS水平包裹列布局

我想實現輸入字段出現在列中的佈局。當柱子超過其容器的高度時，它必須水平包裝。CSS水平包裹列布局

我有achieved this layout using flexbox，但flexbox（更具體地flex-wrap財產）isn't widely enough supported。在我的情況下，我需要支持現代Web瀏覽器，並且至少IE9 +

此外，表單內容由Ember.js沿着this method的行生成。綁定到表單的模型發生變化，這意味着輸入字段的數量是動態的。

我該如何實現這種佈局更加兼容？

來源

2013-07-11 nickiaconis

可怕的'表格'，如果你能應付一個固定的佈局。你有沒有考慮過這種表單佈局的可用性？ –

輸入字段的數量是否不變？你有沒有像PHP這樣的服務器端腳本語言？ – hungerstar

@Chimoo - 表單內容由Ember.js按照[this method]（http://stackoverflow.com/q/12415299/2085526）生成，所以表單的動態數量取決於模型支持它。據我所知，固定佈局可能不是一種選擇。另外，我從一個模型實現了這個佈局，所以我只是對它的可用性給予粗略的思考。特別是你有沒有想過它的可用性？ – nickiaconis

剛剛更新你的小提琴一點：http://jsfiddle.net/43k5s/6/

.menu-form { 
    background-color: lightgray; 
    padding: 1em 1.5em; 
} 

.menu-form:before, .menu-form:after { 
    content: "\0020"; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

.menu-form:after { 
    clear: both; 
} 

.menu-form { 
    zoom: 1; 
} 

.menu-form div { 
    width: 33%; 
    float: left; 
} 

.menu-form div label { 
    display: block; 
}

使用花車和clearfix這一點應在所有主流瀏覽器（甚至是舊的IE）工作。您也可以使用固定寬度或媒體查詢來更改列數。

來源

2013-07-11 19:41:20

謝謝！不幸的是，我不能接受這個答案，因爲它沒有實現問題中提到的佈局（這些是水平行而不是垂直列），但是如果我不能，我可能最終不得不使用這種方法找到更好的解決方案。 – nickiaconis

您可能會計算字段數（服務器端或javascript），並將它們放在div中的數量相等。然後使用obove css來浮動div。對不起，這是我現在唯一能想到解決這個問題的事情。 –

CSS水平包裹列布局

回答

相關問題