Question

来自新手设计师的简短问题...... 假设我<div class="red">有一个<div class="filler">。如果我在第一个div上使用margin-left:10%并且我在第二个div上使用背景图像（height = 1px和width = 300px）并且我在垂直方向上重复它并将其left: 10%启动，它们将不对齐... 为什么不呢？

HTML：

<!doctype html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="test">
  </div>
  <div class="filler">
  </div>
</body>
</html>

CSS：

html, body {
   height: 100%;
}
.test{

  background-color: red;
  width: 300px;
  height: 300px;
  margin-left: 10%;
}
.filler{
  width:100%;
  height: 300px;
  background: url(../img/test.jpg) top left 10% repeat-y;
}

也许我错过了什么，但是什么？非常感谢！

Answer 1

对于背景图像，使用百分比作为位置具有特殊含义。

它没有（正如您所料）按照您给出的百分比对齐图像的左边缘，而是将百分比与百分比对齐。

好吧，用言语毫无意义！

基本上，它是这样的：

0%:
[IMAGE        ]
50%:
[    IMAGE    ]
100%:
[        IMAGE]

这更有意义吗？解决此问题的最佳方法是将margin-left:10%添加到.filler，而不是将背景定位。

为什么我的div与背景图像正确对齐？

1 个答案: