如何让子div填充父div的空间？

Question

我在父div中有一组具有设定宽度的子div。使用同位素将这些元素放在一起，但我没有使用同位素布局模式，因为它们在间距方面对我不起作用。

我要做的是拥有填充父级空间的div，所以在最右边没有间隙，每个div都有边距和填充。到目前为止它的工作正常如此：

正如您所看到的那样，div具有正确的边距和顶部，但我想要做的是停止每行最后一项的边距。这里的问题是一些div具有不同的宽度。对齐应该与右上方的框相同，如图中所示。

我使用的CSS如下：

.global-post{
    padding: 0;
    height: 400px;
    float: none;
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
    width: 308px;
}

这会创建较窄项目的宽度，然后更宽的项目具有不同的宽度值。

有人能指出我正确的方向来修复这个问题吗？

Answer 1

向negative left margin row提供margin-left: -20px，并将left margin添加到div内row内的每个margin-left: 20px; <{1}} < / p>

    <div class="row">
      <div class="span">1</div>
      <div class="span">2</div>
      <div class="span">3</div>
      <div class="span">4</div>
    </div>

    <div class="row">
      <div class="span">1</div>
      <div class="span">2</div>
    </div>


    .row{
       margin-left: -20px;
    }

    .span{
       margin-left: 20px;
    }