如何在div框之间划一条线 - 简单的时间线实验

Question

我正在尝试用css创建一个简单的时间轴。

这是一个快速的Photoshop商店草图：

HTML：

<div class="item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Curabitur adipiscing dignissim purus at adipiscing.
    </p>
</div>
<div class="timeline"></div>
<div class="item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Curabitur adipiscing dignissim purus at adipiscing.
    </p>
</div>
<div class="timeline"></div>
<div class="item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Curabitur adipiscing dignissim purus at adipiscing.
    </p>
</div>

CSS：

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
    "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
    sans-serif;
    font-weight: 300;
}
.item{
    border-radius:3px;
    margin:10px;
    padding:10px;
    border: solid 1px #EEEEEE;
}
.item p {
    color:#333333;
}
.timeline { }

JS-FIDDLE： http://jsfiddle.net/uFPEf/

但是我无法弄清楚如何在盒子之间划线，欢迎任何想法或解决方案！

Answer 1

在你的时间轴课程中，我会将宽度设为100％，然后添加另一个div，其中包含一个类（.line）。相应地将.line div和样式居中。 .line还将包含该行的高度。

你也可以在.timeline中使用背景图像，该背景图像居中并且重复y。

.timeline { background: url(line.jpg) center top repeat-y; }

我创建了一个非图像版本的JSFiddle：http://jsfiddle.net/uFPEf/3/