我正在尝试使用背景在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的问题,但是如果有人对此有解决方案,请告诉我。

最佳答案

我承认我以前从未玩过这个东西,但是看起来您需要考虑1pxbackground-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/

10-11 23:11
查看更多