我想在整个容器的左侧和右侧创建一个响应式 4x4正方形网格,边距恰好为20px。此外,这将有效地消除每行中第一个方块上的左边距,并且还消除了每行中最后一个方格上的右边距,因为双边距不是“#”。需要。
绿色表示每边20px的边距。
到目前为止,我创建了百分比的正方形网格,但问题在于,由于我在每个正方形的所有边都应用了边距,因此这种方法不保证左右边距(在容器上) )每个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?
答案 0 :(得分:6)
您只需添加
即可section{
margin:-1%;
padding:20px;
}
<强> DEMO 强>
这样,您可以在容器的每一侧安装20px固定水槽。要删除水平滚动条,您可以添加具有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%;
}
&#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;
答案 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 */
}