动态（流体）间隔的多线元素（如合理的）

Question

我想实现这个目标：

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

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

Live Playground

Answer 1

您需要使用％widths和margin。

这样的事情（取自你的例子）：

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