我想将身体背景设置为30.08％乳白色和69.2％灰色。我正在使用CSS渐变进行此操作。然后我要把我所有的文章都设为“左边距：30.08％；”与背景线相交（因此，由渐变创建的背景线就像标尺一样）。这是代码
body{
position: relative;
background: -webkit-linear-gradient(left, #faf4f2, #faf4f2 30.08%, #777777 30.08%, #777777);
}
article{
width: 300px;
height: 200px;
background: red;
margin-left:30.08%;
}
这很好用，但是如您在此jsFiddle示例中看到的那样，本文并不总是与渐变线对齐。因此，根据浏览器的宽度，在某些情况下它看起来很草率。在jsFiddle示例中，如果将窗口的大小调整为（但这不是唯一的要点），您将看到我遇到的问题。不幸的是，这种情况发生在很多不同的地方，以至于我认为媒体查询不会胜任。
有办法解决吗？
谢谢
最佳答案
您的身体宽度和高度为100％
当您在CSS中为元素提供100％的宽度时，基本上
说“使此元素的内容区域完全等于显式
容器的宽度，但前提是容器的宽度必须明确。”
然后您正在使用
article{
margin-left:30.08%;
}
30.08％是什么？
如上所述，您应该使用％
only if its container (which in this case is a block level element <body>) has an explicit width.你可以在这里读更多关于它的内容..
Read it here
我已经更改了您的代码，将值从％更改为像素
body{
background: -webkit-linear-gradient(left, #faf42, #faf42 90px, #777777 90px, #777777);
color: darker(#77777, 10%);
width:300px; height:300px;
}
它现在似乎正在工作。这些值仅用于演示目的。根据您的需要进行更改。
希望能帮助到你。