将固定边距添加到响应网格中

Question

这是我制作的响应式网格。我想在所有元素周围添加10px的边距。 我需要这些边距始终是相同的宽度。 但应用保证金打破了电网的响应方面。我需要利润来挤压＆＃34; div不要＆＃34;推＆＃34;它

＆＃13;

＆＃13;

.wrapper {
  margin: 0 auto;
  max-width: 940px;
  background: #EBEBEB;
}

.ideas__gallery__h3 {
  color: #333;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin-bottom: 34px;
}

.one {
  width: 33.3333333333333333%;
  height: 310px;
  background: lightblue;
  float: left;
}

.two {
  width: 33.3333333333333333%;
  height: 310px;
  background: lightpink;
  float: left;
}

.three {
  width: 33.3333333333333333%;
  height: 310px;
  background: lightyellow;
  float: left;
}

.four {
  width: 33.3333333333333333%;
  height: 310px;
  background: lightcyan;
  float: left;
}

.five {
  width: 66.6666666666666666%;
  height: 310px;
  background: lightgreen;
  float: left;
}

.six {
  width: 66.6666666666666666%;
  height: 310px;
  background: lightskyblue;
  float: left;
}

.seven {
  width: 33.3333333333333333%;
  height: 310px;
  background: lightgoldenrodyellow;
  float: left;
}

＆＃13;

<div class="wrapper">
  <div class="ideas__gallery">
    <h3 class="ideas__gallery__h3">Headline</h3>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用calc从margin中删除width。这意味着margin将不再使div超过容器的width，这会迫使他们进入新的一行。

需要进行以下更改：

• 使用.ideas__gallery div添加新规则margin: 10px;。这会将margin添加到div
的所有子.ideas__gallery中
• 修改每个width的{​​{1}}以使用div从计算出的calc
中删除margin

width

.wrapper {
  margin: 0 auto;
  max-width: 940px;
  background: #EBEBEB;
}

.ideas__gallery__h3 {
  color: #333;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin-bottom: 34px;
}

.ideas__gallery div {
  margin: 10px;
}

.one {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: lightblue;
  float: left;
}

.two {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: lightpink;
  float: left;
}

.three {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: lightyellow;
  float: left;
}

.four {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: lightcyan;
  float: left;
}

.five {
  width: calc(66.6666666666666666% - 20px);
  height: 310px;
  background: lightgreen;
  float: left;
}

.six {
  width: calc(66.6666666666666666% - 20px);
  height: 310px;
  background: lightskyblue;
  float: left;
}

.seven {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: lightgoldenrodyellow;
  float: left;
}

Answer 2

您可以使用css calc。 Jsfiddle

.one, .two, .three
{
    margin: 10px;
    width:calc(33.3333333333333333% - 20px);
}