我想弄清楚如何防止新行上的框在第一个元素上缩进。
作为测试,我只是像这样在 html 中对框进行硬编码:
<ul id="box_container">
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
CSS:
#box_container {
height: auto;
width: 100%;
}
.box {
height: 300px;
width: 23.5%;
display: block;
background: black;
float: left;
}
.box + .box {
margin-left: 2%;
}
.box + .box 中的 margin-left 按我的意愿工作,但是当下一个元素被强制到另一行时,如何防止它添加边距?
我确实知道,如果这有什么不同的话,我只会每行显示四个框。我希望找到一种方法来做到这一点,而不必每 4 个元素将盒子元素包装在某种类型的 div 中,但如果这是唯一的方法,那么我想我别无选择。
最佳答案
您可以尝试使用 nth-child
css 伪选择器来移除 margin-left
。
.box:nth-child(4n+1) {
margin-left: 0;
}
#box_container {
height: auto;
width: 100%;
margin: 0;
padding: 0;
}
.box {
height: 100px;
width: 23.5%;
display: block;
background: black;
float: left;
margin-bottom: 2%;
}
.box+.box {
margin-left: 2%;
}
.box:nth-child(4n+1) {
margin-left: 0;
}
body {
margin: 0;
}
<ul id="box_container">
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
关于html - jQuery 图片加载问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47986815/