用等间距水平线填充div

Question

我需要用叠加的水平虚线填充div。这些线之间的间距为5px。我的div的高度不固定，它随着我添加内容而扩展。

有没有办法只用CSS / HTML来实现这个目的？第二，如果可能的话，它是否也能与IE 8兼容？

Answer 1

如果您使用平铺的背景图像，我猜的最简单的方法。

#mydiv
{
background-image:url('lines.png');
background-repeat:repeat-y;
} 

然后查看http://www.stripegenerator.com/

Answer 2

这将创建水平虚线，间距为5px：

<hr style="border-top: dotted 1px; margin-bottom: 5px" />

Answer 3

你可以组合div框：一个在外面作为容器，然后在内部作为虚线创建者。这是一个开始：

http://jsfiddle.net/pAW48/

<div id="container">
  <div class="fill">&nbsp;</div>
  <div class="fill">&nbsp;</div>
  <div class="fill">&nbsp;</div>
  ...

通过设置CSS overflow-y，您可以隐藏填充div并根据需要添加。

通过使用CSS位置属性和/或margin属性，您应该能够将这些行作为背景并在行之前添加其他div，如果这是您想要的。