css - 动态（流体）间隔的多行元素（如对齐）

Question

我想实现这一点：

这些只是容器内具有流体动态宽度的任何元素。我想将 N 个项目保持在一行中，并且它们之间具有动态间距，因此我的布局将始终连续 4 个并且也具有响应性。

诀窍是每行不使用任何包装元素，只是使用任何 CSS 的最小 DOM。

现场游乐场

Answer 1

使函数在加载和调整大小时触发。

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();

Answer 2

您将需要使用 % 宽度和边距。

像这样的东西（取自您的示例）：

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。