创建一个4x4的正方形自适应网格，在容器的每一侧留出20px的边距？ [英] Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?

问题描述

我想创建一个 response 4x4正方形的网格，在整个容器的左侧和右侧的边距恰好为20px。此外，这将有效消除每行第一个正方形的左页边空白，并且由于不需要双边距，因此消除了每行最后一个正方形的右页边空白 。

I want to create a grid of responsive 4x4 squares with a margin of exactly 20px on the left and right sides of the overall container. Furthermore, this would effectively eliminate the left margin on the first squares in each row and also eliminate the right margin on the last squares in each row since double margins aren't needed.

绿色表示每边20px的边距。

到目前为止，我已经创建了带有百分比的正方形网格，但是问题是，由于我在每个正方形的所有边上都应用了边距，因此该方法不能保证左右边距（在容器上）每个20px。

I've so far created the grid of squares with percentages but the problem is that, since I am applying a margin to all sides of each square, this method does not guarantee a left and right margin (on the container) of 20px each.

小提琴： http://jsfiddle.net/p9qdhfub/1/

HTML

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS

div {
    background: #000;
    float: left;
    height: 24vw;
    margin: 1%;
    width: 23%;
}

问题

我将如何使用容器（即截面）始终具有左边距 20px和右边距 20px？

Question

How would I be able to create a 4x4 responsive grid of squares with the container (i.e. section) always having a margin-left of 20px and a margin-right of 20px?

推荐答案

您只需添加

section{
    margin:-1%;
    padding:20px;
}

演示

DEMO

通过这种方式，您可以将20px固定的排水槽固定在容器。要删除水平滚动条，可以使用 overflow：hidden;

This way you can have your 20px fixed gutters on each side of the container. To remove the horizontal scrollbar, you can add an other container with overflow:hidden;

演示

DEMO

html,
body {
  margin: 0;
}
.w {
  overflow: hidden;
}
section {
  margin: -1%;
  padding: 20px;
}
section div {
  background: #000;
  float: left;
  height: 24vw;
  margin: 1%;
  width: 23%;
}

<div class="w">
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>

这篇关于创建一个4x4的正方形自适应网格，在容器的每一侧留出20px的边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！