動態地（流體）隔開的多元素（如對齊）

Question

我想實現這一點：

這些只是其中有一個流體動寬度的容器內的任何元素。 我想將N個項目放在一行中，它們之間有動態間距，所以 我的佈局總是有4個並且也是響應式的。

訣竅是不使用每行的任何包裝元素，只是最小的DOM與任何CSS。

Live Playground

Answer 1

您將要使用％寬度和幅度。

像這樣的東西（從你的例子所）：

ul{ list-style:none; } 

li{ 
    float: left; 
    display:block; 
    width:21.7%; 
    height:50px; 
    background:red; 
    margin: 0 4.4% 4.4% 0; 
} 
li.z{ 
    margin-right: 0; 
} 

li:nth-child(2n){ 
    background:blue; 
} 

注意，我添加了一個「Z」類到你的最後一個元素，即每4個。

HTH。

Answer 2

使該功能在加載和調整大小時觸發。

的jsfiddle：http://jsfiddle.net/Bushwazi/j8PKn/

HTML：

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

CSS：

ul { 
    list-style:none; 
    width:100%; 
    min-width:400px; 
} 
ul li { 
    width:50px; 
    display:inline-block; 
    float:left; 
    height:50px; 
    margin-bottom:50px; 
} 
ul li:nth-child(2n+1) { 
    background:#ff0000; 
} 
ul li:nth-child(2n+2) { 
    background:#0096ff; 
} 

JS：

var organize = function(){ 
    // get the outer width 
    shWidth = $('ul').width(); 
    console.log(shWidth); 
    // generate the width of each column 
    colWidth = shWidth/4; 
    console.log(colWidth); 
    // add the correct margin to the first column 
    $col1 = $('ul li:nth-child(4n+1)'); 
    $col1.css({'margin':'10px ' + (colWidth - 50) +'px 10px 0'}); 
    // add the correct margin to the center columns 
    $colCenter = $('ul li:nth-child(4n+2), ul li:nth-child(4n+3)'); 
    $colCenter.css({'margin':'10px ' + (colWidth - 50)/2 +'px'}); 
    // add the correct margin to the 4th columns 
    $col4 = $('ul li:nth-child(4n+4)'); 
    $col4.css({'margin':'10px 0 10px ' + (colWidth - 50) +'px'}); 
} 


organize();