我有一堆带有这样背景图片的 div:
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
...等等(有 20 多个 div)。
每个 div 都有自己的背景图片。
现在,在大屏幕上我想每行显示 3 个 div,所以我得到了这个:
@media screen and (min-width:768px) {
div {
width:33%;
}
}
我想要的是每个 div 之间 2ch 宽的“装订线”。当我使用 padding:2ch;
它不起作用(div 之间没有空格)并且当我使用 margin:2ch;
然后第三个 div 向下到下一行(即使使用 box-sizing:border-box
)。
最简单的解决方案是什么?这是我希望 div 看起来像的示例(请参阅每个类图像:http://www.platinumfitnessaz.com/classes/)。
提前致谢。
最佳答案
与注释相反,百分比与 ch
单位无关。只是您没有足够的空间来连续放置东西。
如果您的页面是 100%
宽度,那么 33%
宽度的连续 3 个 div 当然不会留下任何边距空间。 box-sizing
只影响填充和边框,不影响边距,所以这对你没有帮助。
解决方案是使用 calc()
函数。
如果您想要在 div 周围留出 2ch
空间,请使用 2ch
作为 margin。然后,如果您希望每行三个,则可以使用 calc(33% - 2ch)
获取每个宽度。
我们只需要右边距和底部边距就可以达到您想要的效果:
div {
width: calc(33.333% - 2ch);
height: 150px;
float: left;
margin-bottom: 2ch;
margin-right: 2ch;
background-color: firebrick;
}
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
这是简单的版本。但是,它并没有完全最大化我们的空间,因为在 div 的第三列右侧有一个 2ch
边距可以重新分配给 div 本身。
为了充分利用所有空间,我们可以做一些数学运算让我们的计算表达式更漂亮一些,然后使用 nth-child
只将右边距应用到 div第一列和第二列:
div {
width: calc(calc(calc(calc(33.333% - 2ch) * 2) + 33.333%) / 3);
height: 150px;
float: left;
margin-bottom: 2ch;
background-color: firebrick;
}
div:nth-child(3n+1),
div:nth-child(3n+2) {
margin-right: 2ch;
}
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
<div>
<h1>Text</h1>
</div>
关于html - 当元素是带有背景图像的 div 时在图像之间填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45928522/