如何在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/