1

I am using the columnal(http://www.columnal.com/) responsive grid framework and am trying to create a vertical divider line in between columns that will stay centered in the right margin as the viewport is resized.

I have tried a couple of solutions using background images and pseudo elements but neither has been successful. The right margin is used by the columnal framework so this can't be used as part of the solution which is why I think a vertically repeating background image or pseudo element is required.

I am also trying to avoid using additional html elements in the code, I would like to keep this as clean as possible. However if that's the only solution, then so be it.

Here's the 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>

and here's the CSS:

* {
    box-sizing: border-box;
}

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

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

I've put it up as fiddle here which also includes a little more explanation:

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

4

1 回答 1

2

我想出了一个使用:after伪类的不错的解决方案。唯一的缺点是您必须指定一半的边距大小（正确设置）。

jsFiddle Demo

.vertical_divider:after {
    background: red;
    width: 1px;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -15px;
}
于 2013-09-06T09:09:57.720 回答