带齐边的 HTML/CSS 全宽 4 列布局答案

【问题标题】：HTML/CSS Full Width 4 Column Layout With Flush Edges带齐边的 HTML/CSS 全宽 4 列布局
【发布时间】：2018-02-24 01:56:36
【问题描述】：

我正在尝试使用此代码在纯 HTML/CSS（基本上，不使用引导程序）响应式网站上实现全宽 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 （红线表示容器的侧面。）

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

【问题讨论】：

首先，要成为 css world 构建响应式网站的摇滚明星，不要使用 float 或 display: table，使用 css grid 或 flexbox
不要在最后一个元素上放置正确的内边距，或者使用border-box box-sizing。

标签： css html

【解决方案1】：

Flexbox ii 是最好的解决方案。但是你可以试试这样的：

.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/

【讨论】：

此解决方案在第一列之前和最后一列之后有填充，并且不会与 OP 图像中的红线对齐。
如果您不喜欢边距，只需将负边距设置为父级。 .row-fourcol{ 左边距：-5px;边距右：-5px； }
我可能会使用您的解决方案，通过修改您的 jfiddle 示例，我发现将您的媒体查询更改为最大宽度而不是最小宽度，并添加 -13 边距，然后将我的 45% 更改为50% 的宽度我得到了想要的效果。我现在将花一些时间在我自己的解决方案上对此进行测试，然后将问题标记为已回答。谢谢！
编辑：事实证明，-5px 边距（如最初建议的那样）效果很好。再次感谢。

【解决方案2】：

我建议你使用 flexbox。在这里阅读flexbox tricks

 .row-fourcol{
        display:flex;
    }
    .column-fourcol{
        flex:1;
    }

【讨论】：