当前位置 : 主页 > 网页制作 > css >

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

来源:互联网 收集:自由互联 发布时间:2021-06-13
我正在使用960.gs网格系统进行设计.在两个盒子之间添加细分离垂直线的最佳方法是什么?宽度和颜色应可调节. 我的计划是定义几个具有绝对位置和背景颜色的div类,每个可能位置一个
我正在使用960.gs网格系统进行设计.在两个盒子之间添加细分离垂直线的最佳方法是什么?宽度和颜色应可调节.

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

您可以使用伪选择器实现边框:after和absolute positioning,如下所示:

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

网友评论