向部分添加边距会破坏三列设计答案

【问题标题】：Adding margin to sections breaks the three column design向部分添加边距会破坏三列设计
【发布时间】：2019-12-10 07:36:36
【问题描述】：

以下是简单的三栏设计的 HTML 和 CSS 代码。但是当我添加padding: 0 1%; 时，它会破坏列并将第三列推到第二行。这真的很奇怪，因为我认为我添加了填充，它应该在 div 内，而不是边距？我该如何解决？

#container {
  width: 800px;
  margin: 0 auto;
}

.row {
  width: 100%
}

.part {
  width: 33.33%;
  padding: 0 1%;
}

<div id="container">
  <div class="row">
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
  </div>
  <div class="row">
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
  </div>
  <div class="row">
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
    <div class="part"><img>
      <p class="text">some text</p>
    </div>
  </div>
</div>

【问题讨论】：

在#container 中添加 box-sizing:border-box。它将在元素的总宽度和高度中包含填充和边框
@HienLuong 不是#container，而是.part，但是由于百分比宽度和填充，这可能会导致 IE 出现问题。
另外 - div 是块元素 - 让它们 inline-block
您考虑过使用引导程序吗？你在这里重新发明轮子。
@fnostro 不适用于给定的 html，因为 div 之间有空格

标签： html css responsive-design multiple-columns padding

【解决方案1】：

第一方面说明：你在part div 中缺少display: inline-block。

我添加了填充，它应该在 div 内，而不是边距

不，padding 默认不在 div 内，padding 会添加到实际宽度中，这样每个部分的全宽将是：

33% + 1% 左边距 + 1% 右边距 = 35%;

并且行的总宽度将为：105%，因此它不适合容器并将拆分到另一行。

一种解决方案是part宽度：31%；

  #container {
      width: 800px;
      margin: 0 auto;
    }

    .row {
      width: 100%;
    }

    .part {
      width: 31%;
      padding: 0 1%;
      display: inline-block
    }

 <div id="container">
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
    </div>

如果您想将所有填充视为宽度的一部分，则可以使用其他解决方案：

* {
      box-sizing: border-box;
    }

  * {
      box-sizing: border-box;
    }
    
  
  #container {
      width: 800px;
      margin: 0 auto;
    }

    .row {
      width: 100%;
    }

    .part {
      width: 33%;
      padding: 0 1%;
      display: inline-block;
    }

<div id="container">
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
    </div>
  </body>

第三个解决方案，我认为最好的解决方案是对每一行使用display: grid；

 #container {
      width: 800px;
      margin: 0 auto;
    }

    .row {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
    .part {
      padding: 0 1%;
    }

  <div id="container">
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
      <div class="row">
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
        <div class="part">
          <img />
          <p class="text">some text</p>
        </div>
      </div>
    </div>

【讨论】：

还有其他方法可以做到这一点，但这是一个可行的解决方案，同时包含这两种解决方案并没有什么坏处。另外，在 IE 上测试一下，它可能会出错
欢迎，我已经用三个有效的解决方案更新了答案

【解决方案2】：

因为 box-sizing 不会继承给子使用

#container, #container * {
  box-sizing: border-box;
}

尽量避免响应式网站的水平边距，因为 box-sizing 不包括边距。

【讨论】：

向#container 添加border-box 将避免在为该div 提供填充或边框时使该div 扩展大于800px。
我知道规则的作用，但容器没有填充
最好在所有样式的 all 元素上使用边框框作为默认设置，以防止出现问题中的问题。默认如下：* { box-sizing: border-box; }
也许是一个新站点，但绝对不是一个已经开发的站点。你也可以申请*{...}然后

【解决方案3】：

在我测试了你的代码之后，我的意见是在通用选择器“*”处添加 box-sizing:border-box 或者你可以遵循这个规则而不用 box-sizing。

.part {width: calc(33.33% - 3%); /* 3% mean part+part+part padding. */ padding: 0 1%;display: inline-block; /* you can also use float: left or inline-block */ }

谢谢。

【讨论】：