时间戳

首页 > 解决方案 > 向部分添加边距会破坏三列设计

html - 向部分添加边距会破坏三列设计

问题描述

下面是一个简单的三栏设计的 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>

标签： htmlcssresponsive-designmultiple-columnspadding

解决方案

第一个注意事项：你display: inline-block从partdiv 中丢失了。

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

不，默认情况下填充不在 div 内，填充添加到实际宽度，以便每个部分的全宽为：

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>

推荐阅读