Question

当我向网格添加margin时，由于网格元素的width为33.33％，所以这些部分会垂直堆叠。

此外，我不想使用任何框架（我想通过使用自定义CSS来做到这一点）。

Answer 1

由于在元素宽度的顶部添加了边距，因此3个元素的组合宽度超过100％，这就是您的元素进入下一行的原因。您可以降低元素宽度，以便100％添加边距。或者不要使用保证金。

Answer 2

你需要再一次围绕你的div来制作你自己的网格。

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
body {
  font-family: Comic Sans MS;
}
.container {
  padding: 50px;
  overflow: hidden;
}
h1 {
  text-align: center;
  margin: 20px 0px 20px 0px;
}
section {
  float: left;
  padding: 0 20px;
}
.section-content {
  background-color: #808080;
  border: 2px solid black;
  overflow: hidden;
}
.section-content > h3 {
  float: right;
  padding: 5px 30px;
  clear: both;

}
.section-content > p {
  padding: 5px;
  float: left;
}

div>section:nth-child(1) h3{ background-color: #D59898; }
div>section:nth-child(2) h3{ background-color: #C14543; color: white; }
div>section:nth-child(3) h3{ background-color: #E5D198; }
@media(min-width: 992px){
  section{
    width: 33.33%;

  }
}

<h1>Our Menu</h1>
<div class="container">
  <section>
    <div class="section-content">
      <h3>Chicken</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad miluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  quis nostrud exer.
      </p>
    </div>
  </section>
  <section>
    <div class="section-content">
      <h3>Beef</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamc nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate veit anim id est laborum.
      </p>
    </div>
  </section>
  <section>
    <div class="section-content">
      <h3>Sushi</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vo  quis nostrud exer quis nostrud exer.
      </p>
    </div>
  </section>
</div>

Answer 3

当您使用margin宽度为%的元素时，会将margin值添加到%。

例如，如果您有33%宽的元素并向这些元素添加10px margin;您的元素为33% + 10px，这使得大于33％。

改为使用padding（和box-sizing: border-box

<强> FIDDLE

Answer 4

如果您有三列，请说出这样的话

<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>

只要向它们添加边距或填充，它们就会将最远的一个向下推到一条线上。理由是33.3％宽已经没有空间可以进一步延伸它们因为它超过了100％。

如果你要这样做

<div class="col-md-3">
    <div class="inner" style="padding:10px;"></div>
</div>
<div class="col-md-3">
    <div class="inner" style="padding:10px;"></div>
</div> 
<div class="col-md-3">
    <div class="inner" style="padding:10px;"></div>
</div>

然后.inner div中的所有内容都会应用填充，以便内容看起来不会触及旁边的.col-md-3旁边的内容。

这是一个小提琴，说明了进一步的https://jsfiddle.net/mak9te5c/

CSS Grid＆amp;的问题余量

4 个答案: