Question

我正在使用960.gs网格系统进行设计。在两个盒子之间添加细分离垂直线的最佳方法是什么？宽度和颜色应该是可调节的。

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

Answer 1

您可以使用伪选择器:after和绝对定位来实现边框，如下所示：

.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/

Answer 2

如果你不想让分隔线改变下一排DIV的位置，我认为绝对定位是你最好的选择。你可以做的是使用一个绝对定位的：后选择器来定位相对于盒子底部的东西但不影响布局。这对我来说可以在不影响布局的情况下在框之间定位一条线，只需根据需要更改最后四个属性的值：

#topbox:after {
    content: "";
    display: block;
    position: absolute;
    margin-top: 25px;
    height: 5px;
    width: 400px;
    background-color: #999;
}

Answer 3

我可能不理解你的问题。我可能只是在其中一个列上使用右边框或左边框并调整填充以确保它在2之间居中。

如何在两个960.gs框之间添加垂直线？

3 个答案: