[分享]css两个列中间加竖线

在网页设计过程中，经常会出现需要在两个列之间加上一条竖线的情况。这种效果可以用CSS来轻松实现。首先，在HTML文件中建立两个用于显示内容的div元素，然后使用CSS将这两个元素排成两列。 // 第...

在网页设计过程中，经常会出现需要在两个列之间加上一条竖线的情况。这种效果可以用CSS来轻松实现。

首先，在HTML文件中建立两个用于显示内容的div元素，然后使用CSS将这两个元素排成两列。

 <div class="column1">
        // 第一列的内容
    </div>
    <div class="column2">
        // 第二列的内容
    </div>

    .column1, .column2 {
        float: left;
        width: 50%;
        padding: 20px;
        box-sizing: border-box;
    } 

接下来，我们需要使用CSS加上竖线。一种简便方法是将竖线作为一个伪元素来实现。

 .column1:before {
        content: "";
        border-right: 1px solid #000;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    } 

这段CSS代码将在column1元素的左边添加一个细长的、黑色的竖线。我们使用位置为absolute，左距离为0和top距离为0的伪元素来实现竖线的位置。height属性设置为100%可以让竖线与列的高度相同。

如果还想让竖线在两列之间留出一些距离，可以用margin实现：

 .column1:before {
        content: "";
        border-right: 1px solid #000;
        height: 100%;
        position: absolute;
        left: -10px;
        top: 0;
        margin-right: 20px;
    } 

在左偏移量left中，我们将值设为了-10px来让竖线向左侧偏移10px。然后，我们使用margin-right属性将竖线右移20px，从而获得我们需要的距离。

通过这些CSS代码，我们可以轻松地在两个列之间加上一条竖线，从而实现更加美观的网页设计。