如何在div的給定像素上繪製垂直線

Question

繪製垂直線border-left and border-right看起來很簡單。

但在我的情況下，我有一個單獨的div，我需要在給定的像素 繪製垂直線說（240px）。

我該如何做到這一點？

Answer 1

您可以使用:after或:before僞元素這一點，將其定位於absolute在240px。

例：http://jsfiddle.net/abhitalks/YMS4F/1/

CSS：

div.split { 
    position: relative; 
    height: 20px; 
    width: 400px; 
    border: 1px solid black; 
} 

div.split:after { 
    content: ""; 
    display: block; 
    width: 1px; 
    height: 20px; 
    border-left: 1px solid gray; 
    position: absolute; 
    top: 0px; 
    left: 240px; 
} 

兩者，寬度和高度在爲演示目的像素。希望你明白這個主意。

Answer 2

最簡單的方法是在主div中創建另一個div，並給出該邊界左/邊界 - 右邊，然後您可以縮放內部div到你想要的，也可以更高或更低。

只需編輯代碼，以滿足您的需求

HTML

<div class="parent"> 

    <div class="child"></div> 

</div> 

CSS

.parent { 
    height:300px; 
    width:300px; 
    background:silver; 
} 

.child { 
    position:relative; 
    height:200px; 
    width:1px; 
    background:red; 
    top:100px; 
} 

http://jsfiddle.net/7Qj2d/