我正在尝试使用背景在div中创建一个网格。
自然地,background-size属性是创建网格的一种好方法,其中10%的大小将在div中创建10个均匀间隔的单元格,例如:
div{
width:200px;
border:solid 1px black;
background-size: 10% 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
}
<div>x</div>
但是,我还需要将框的大小设置为“边框”,因为否则,该框将占用比通过width属性指定的像素更多的像素。并在Chrome中造成各种破坏,背景大小按百分比指定,例如:
div{background-color:white;}
#d1 {
width:200px;
border:solid 1px black;
background-size: 10% 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
padding:5px;
box-sizing:border-box;
}
#d2 {
width:200px;
border:solid 1px black;
background-size: 10% 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
padding:5px;
}
<div id="d1">more than 10 cells</div>
<p>
<div id="d2">box is bigger than 200px</div>
请注意,尽管最上层div(d1)中的每个单元格应为div宽度的10%,但仍有超过10个单元格显示。
似乎这只是Chrome的问题,但是如果有人对此有解决方案,请告诉我。
最佳答案
我承认我以前从未玩过这个东西,但是看起来您需要考虑1px
的background-image
宽度。现在不要问我为什么,但是它可以工作。用不同的百分比和宽度对其进行了测试。如果您需要原因,而不仅是方法,那么您必须亲自浏览W3C的文档,或者等待更好的文档化答案。
div {
background-color:white;
width:200px;
border:solid 1px black;
background-size: calc(10% + 1px), 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
padding:5px;
box-sizing:border-box;
}
div ~ div {
width:300px;
}
<div>exactly 10%</div>
<p>
<div>also exactly 10%</div>
干杯!
关于css - 框大小为边框时的背景大小(按百分比),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42350092/