如何使子div的邊距填充父div的空間？

Question

我在具有固定寬度的父div內有一組子div。 使用同位素將元素放在一起，但我沒有使用同位素布局模式，因為它們在間距方面對我不起作用。

我想做的是讓div填充父級的空間，因此在最右邊沒有間隙，並且每個div都有邊距和填充。 到目前為止，它的工作方式如下：

如您所見，divs的右邊距和頂部都具有正確的邊距，但是我想做的是在每一行的最后一項上停止邊距。 這里的問題是某些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 ，並向該row內的每個div添加left margin ，例如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;
    }