在容器的每一侧创建一个4x4响应的正方形网格,边距为20px?

时间:2014-12-30 17:45:28

标签: css responsive-design grid-layout

我想在整个容器的左侧和右侧创建一个响应式 4x4正方形网格,边距恰好为20px。此外,这将有效地消除每行中第一个方块上的左边距,并且还消除了每行中最后一个方格上的右边距,因为双边距不是“#”。需要。

  

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

enter image description here

到目前为止,我创建了百分比的正方形网格,但问题在于,由于我在每个正方形的所有边都应用了边距,因此这种方法不保证左右边距(在容器上) )每个20px。

小提琴: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%;
}

问题

我如何能够使用容器(即section)创建一个4x4响应方块网格,其中margin-left为20px,margin-right为20px?

2 个答案:

答案 0 :(得分:6)

您只需添加

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

<强> DEMO

这样,您可以在容器的每一侧安装20px固定水槽。要删除水平滚动条,您可以添加具有overflow:hidden;

的其他容器

<强> DEMO

&#13;
&#13;
html,
body {
  margin: 0;
}
.w {
  overflow: hidden;
}
section {
  margin: -1%;
  padding: 20px;
}
section div {
  background: #000;
  float: left;
  height: 24vw;
  margin: 1%;
  width: 23%;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

<强> jsfiddle demo

部分总是有20px的保证金;
每个第一个(+4)DIV的左边距为0;
每四个DIV的右边距为0;

div {
    background: #000;
    float: left;
    height: 24vw;
    margin: 1%;
    width: 23.5%;
}
div:nth-child(4n-3){
    background:red;
    margin-left:0; /* or use 20px */
}
div:nth-child(4n){
    background:blue;
    margin-right:0; /* or use 20px */
}
section{
    margin:0 20px; /* so you don't need this any more */
}