如何在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％，然後在該（.line）內添加另一個div。將.line div和樣式居中。 .line還將包含該行的高度。

你也可以在.timeline中使用背景圖像並以repeat-y爲中心。

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

我創建了一個用的jsfiddle非圖像版本：http://jsfiddle.net/uFPEf/3/