Question

使用 border-left 和 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并给出border-left / border-right，然后你可以将内部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/

如何在div的给定像素处绘制垂直线

2 个答案: