小孩div的均勻間隔和沖刷到父母的一側：如何？

對不起，我真的不知道該怎麼說。我一直在環顧谷歌和SO，並一直試圖找到類似的東西，我確信之前有人問過，所以如果我的搜索不夠徹底，我很抱歉。小孩div的均勻間隔和沖刷到父母的一側：如何？

我試圖把一個佈局，看起來像這樣

enter image description here

我試圖找出是否有這樣做，而不必指派專班到的純CSS方式頂行/底行和每行的開始/結束。這也是爲了動態填充而創建的，並且如果存在多於6個盒子，則會滾動。從畫面中取出滾動條的高度/寬度是有辦法用純CSS創建這種佈局，或者我將不得不看一個JavaScript解決方案？

我看着使用flexbox，但我需要這至少與IE8兼容，所以我不能真正走這條路線。

非常感謝。

來源

2011-12-30 Brodie

是否有固定的或流體的高度爲內和外箱？ – Wex 2011-12-30 22:52:00

此時內部和外部的盒子都有固定的寬度，但是如果我們決定改變內部盒子的大小，我寧願外部盒子沒有固定的寬度/高度。我們CTO的整個口頭禪是所有的容器元素都應該是流動的，這樣我們就可以根據需要編輯子元素並將它們粘住。這是因爲我們很多內容都是動態生成的，所以我們需要一個響應速度非常快的容器ui方案。 – Brodie 2011-12-30 22:57:39

您可以通過浮動或顯示它們來輕鬆實現這一目的。

<div class="inline-block"> 
    <span></span><span></span><span></span><span></span><span></span><span></span> 
</div> 

<div class="float"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
</div>

div { 
    background: blue; 
    margin: 0 0 10px; 
    width: 330px; } 
span { 
    background: red; 
    width: 100px; 
    height: 50px; 
    margin: 5px; } 
.inline-block { 
    line-height: 0; } 
.inline-block span { display: inline-block; } 
.float { overflow: hidden; } 
.float span { float: left; }

預覽：http://jsfiddle.net/Wexcode/upFPC/

來源

2011-12-30 23:04:45 Wex

我真的很感謝答案......這是我現在正在做的。我擁有10px的所有內部元素......但設計師給我的樣機在內部和外部盒子之間的間隔爲0。當我寫出盒子的功能時，我可能只需添加定位。雖然我知道機會很渺茫，但我想知道是否有辦法用js來實現這一點。 – Brodie 2011-12-30 23:12:53

我已經更新了我的答案，我認爲它可以解決您的問題。 – Wex 2011-12-30 23:25:28

我喜歡這個解決方案......我會爲了負面保證金聲明而抓住地獄，但是......它會起作用。我猜這是實現它的唯一方法。謝謝@wex – Brodie 2011-12-30 23:33:09

小孩div的均勻間隔和沖刷到父母的一側：如何？

回答

相關問題