我正在使用 960.gs 网格系统进行设计。在两个盒子之间添加一条细的分隔垂直线的最佳方法是什么？宽度和颜色应该是可调的。
我的计划是定义几个具有绝对位置和背景颜色的 div 类，每个可能的位置一个，并使用 JQuery 确保它与周围的框具有相同的高度。不过，这似乎有点复杂。有没有更好的解决方案？
【问题讨论】：
您可以使用伪选择器: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;
}
【讨论】：
如果你不希望分隔线改变下一行DIV的位置，我认为绝对定位是你最好的选择。您可以做的是使用绝对定位的 :after 选择器相对于框的底部定位某些内容，但不会影响布局。这对我来说可以在框之间放置一条线而不影响布局，只需根据需要更改最后四个属性的值：
#topbox:after {
content: "";
display: block;
position: absolute;
margin-top: 25px;
height: 5px;
width: 400px;
background-color: #999;
}
【讨论】：
我认为这在没有 jQuery 的情况下是可行的。主要问题是考虑元素的可变高度。
参考这里：http://jsfiddle.net/uqZgt/1/
HTML：
<div class="container">
<div class="box-1">
This box has alot of content. This box has alot of content. This box has alot of content.
</div>
<div class="box-2">
This box has a little bit of content. This box has a little bit of content. This box has a little bit of content. This box has alot of content. This box has alot of content. This box has alot of content.
</div>
</div>
CSS：
.container {
width: 242px;
}
.container div {
width: 100px;
background: #ff0000;
float: left;
padding: 10px;
border-right: 2px solid #000
}
.box-1 + .box-2 {
border-right: none;
border-left: 2px solid #000
}
.box-1 ~ .box-2 {
margin-left: -2px
}
在这个例子中，.container div 中的所有 div 都有一个 2px 的纯黑色右边框。然而，一个类 box-2 的元素直接继承一个带有 .box-1 的元素将有一个 2px 纯黑色 border-left 和 noborder-right。到目前为止，这在两个元素之间创建了一个 3px 的边框。
现在，.box-1 ~ .box-2 选择直接在 .box-2 之前的任何 .box-1，并将其左边距设置为 -2px。这会将其同级元素向左拖动两个像素，从而有效地使两个元素的边界重叠。
.container div 的宽度等于两个元素的宽度之和（200px），加上 padding（左右 10px = 20px）加上 一个的宽度边框（2px）。 242px，所以这两个元素完美契合。
无论哪个 div 的内容多，边框看起来都会跨越内容最多的 div 的高度。
【讨论】：
~。
我可能不理解您的问题。我可能只是在其中一列上使用右边框或左边框并调整填充以确保它在 2 之间居中。
【讨论】：