如何在两个960.gs框之间添加垂直线？ [英] How to add a vertical line between two 960.gs boxes?

问题描述

我使用960.gs网格系统进行设计。在两个盒子之间添加细分离垂直线的最佳方法是什么？

I'm using the 960.gs grid system for a design. What is the best way to add a thin separating vertical line between two boxes? The width and color should be adjustable.

我的计划是定义一对div类，绝对位置和背景颜色，每个可能的位置一个，并使用JQuery请确保其具有与周围框相同的高度。这似乎有点复杂，但。是否有更好的解决方案？

My plan is to define a couple of div classes with absolute positions and background color, one for each possible position, and use JQuery to make sure that it has the same height as the surrounding boxes. That seems a bit complicated, though. Is there a better solution?

推荐答案

您可以使用伪选择器 / code>和绝对定位，如下所示：

You can implement a border using the pseudo-selector :after and absolute positioning, like so:

.line:after {
    border-right: 1px solid #000000;
    content: "";
    display: block;
    margin: 1px;
    position: absolute;
    right: -11px;
    top: 0;
    bottom: 0;
}

.grid_1,  .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9,  .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
    position:relative;
}

这是一个演示http://jsfiddle.net/andresilich/ZTyf4/show/

在此处编辑 http://jsfiddle.net/andresilich/ZTyf4/

这篇关于如何在两个960.gs框之间添加垂直线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！