javascript - 如何让子 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

给 row 一个 negative left margin 像 margin-left: -20px 并添加 left margin 到row 中的每个 div 都像 margin-left: 20px;

    <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;
    }