Question

我正在使用柱状（http://www.columnal.com/）响应式网格框架，并尝试在列之间创建一个垂直分隔线，在视口调整大小时将保持在右边距中心。

我尝试了几种使用背景图像和伪元素的解决方案，但都没有成功。柱状框架使用右边距，因此不能将其用作解决方案的一部分，这就是为什么我认为需要垂直重复的背景图像或伪元素。

我也试图避免在代码中使用额外的html元素，我想尽可能保持干净。但是，如果这是唯一的解决方案，那就这样吧。

这是HTML：

<div class="container">
    <div class="row">
        <div class="col_4 vertical_divider">
            <div class="content">I want a vertical divider line to appear in the centre of the margin to the right of this grey box ->
                <br/>
                <br/>If you don't see columns to the right re-size this window to make it bigger.</div>
        </div>
        <div class="col_4 vertical_divider">
            <div class="content">This example uses the <a href="http://www.columnal.com/">Columnal</a> responsive framework</div>
        </div>
        <div class="col_4 last">
            <div class="content">Solution could be using a repeating image, pseudo elements or something else. I would like to avoid using additional html if possible. Solution should preferably be css applied to the 'vertical_divider' class.</div>
        </div>
    </div>
</div>

这是CSS：

* {
    box-sizing: border-box;
}

.content {
    background-color:#ddd;
    min-height:400px;
    padding:5px;
}

/* Solution preferably applied to this class */
.vertical_divider { 
}

我把它作为小提琴放在这里，其中还包括一些解释：

http://jsfiddle.net/NtuZJ/12/

Answer 1

我使用:after伪类提出了一个很好的解决方案。唯一的缺点是你必须指定一半的边距（到右设置）。

jsFiddle Demo

.vertical_divider:after {
    background: red;
    width: 1px;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -15px;
}

使用columnal css响应框架的列之间的垂直分隔线

1 个答案: