css - 具有齐平边缘的 HTML/CSS 全宽 4 列布局

Question

我正在尝试使用以下代码在纯 HTML/CSS(基本上不使用 Bootstrap )响应式网站上实现全宽 4 列布局:

HTML:

<div class="row-fourcol">
  <div class="column-fourcol">
    <div class="stockitembox">
      <img src="../resources/graphics/images/product_hexagonal.png" title="Search our hexagonal steel stock range ..." alt="Hexagonal steel bar" onclick="hexagonalFunction()">
      <p>HEXAGONAL</p>
    </div>
  </div>
  <div class="column-fourcol">
    <div class="stockitembox">
      <img src="../resources/graphics/images/product_round.png" title="Search our round steel stock range ..." alt="Round steel bar" onclick="roundFunction()">
      <p>ROUND</p>
    </div>
  </div>
  <div class="column-fourcol">
    <div class="stockitembox">
      <img src="../resources/graphics/images/product_rectangular.png" title="Search our rectangular steel stock range ..." alt="Rectangular steel bar" onclick="rectangularFunction()">
      <p>RECTANGULAR</p>
    </div>
  </div>
  <div class="column-fourcol">
    <div class="stockitembox">
      <img src="../resources/graphics/images/product_square.png" title="Search our square steel stock range ..." alt="Square steel bar" onclick="squareFunction()">
      <p>SQUARE</p>
    </div>
  </div>
</div>

CSS:

.column-fourcol {
  float: left;
  width:24.3%;
  padding: 10px 10px 10px 0px;
}

.row-fourcol::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 1903px) {
  .column-fourcol {
    width: 45%;
    float: left;
  }
}

但是，我的问题是，在添加间距(使用填充)时，我必须在右侧添加填充，这意味着我的列在左侧齐平但在右侧不齐平，因为它们没有填充整个空间或由于右侧填充而下降到下一行。我在下图中显示了这一点，左侧与左边框齐平，但右侧无法齐平，因为填充会阻止它。

我如何制作 4 列布局，其中各列间隔开但左右齐平到容器的一侧？我已经搜索了与我自己类似的问题(例如:CSS Full-Width Grid - Columns with Even Margins)但是，这个例子似乎与我想要的间隔列效果不符(或者我可能只是不明白答案)。

Example of four column padding (红线表示容器的侧面。)

感谢您的任何帮助，非常感谢所有帮助。

Answer 1

Flexbox i 是最好的解决方案。但是你可以尝试这样的事情:

.column-fourcol {
  float: left;
  width:25%;

}
.stockitembox{
  padding: 10px 5px;
}

.row-fourcol::after {
  content: "";
  display: table;
  clear: both;
}

img{
  max-width:100%;
}

@media (min-width: 1903px) {
  .column-fourcol {
    width: 45%;
    float: left;
  }
}

您可以在这个链接中看到结果: https://jsfiddle.net/n59us5oz/7/

更新

您可以删除向行添加负边距的左右间距: https://jsfiddle.net/n59us5oz/8/