0

我想将身体背景设置为 30.08% 奶油和 69.2% 灰色。我正在使用 CSS 渐变来执行此操作。然后我要让我所有的文章都是'margin-left：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 示例中，如果您将窗口大小调整为652px（但这不是唯一的一点），您将看到我遇到的问题。不幸的是，这种情况发生在很多不同的地方，我认为媒体查询无法完成这项工作。

有没有办法解决它？

谢谢

4

1 回答 1

0

你已经给了你的身体宽度和高度的100%

当您在 CSS 中为元素指定 100% 的宽度时，您基本上是在说“使该元素的内容区域完全等于其容器的显式宽度——但前提是其容器具有显式宽度。”</p>

然后你正在使用

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.

你可以在这里读更多关于它的内容..

在这里阅读

我已经更改了您的代码，将值从 % 更改为像素

body{
background: -webkit-linear-gradient(left, #faf42, #faf42 90px, #777777 90px, #777777);

color: darker(#77777, 10%);
width:300px; height:300px;
}

它现在似乎正在工作。这些值仅用于演示目的。根据您的需要进行更改。

希望能帮助到你。

于 2013-03-31T10:32:18.963 回答