1

我正在尝试在 1000px 固定宽度页面的左侧和右侧实现虚线（自定义）无聊。

左边的很好，这是一种享受：

#border-left{
position: absolute;
float:left;
top: 0px;
bottom: 0;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}

但是，当我在右侧重新执行此操作时，它不会完全起作用。我需要它相对定位在 1000px 的右侧而不是窗口的右侧。

#border-right{
position: relative;
right: 0;
top: 0;
bottom: 0;
margin-top: -90px;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}

父元素：

#container{
width:1000px;
display: block;
margin:0px auto;
text-align:left;
padding-top:90px;
}

那是行不通的。我能做到这一点吗？我需要它基本上浮动：正确（但是我不能使浏览器窗口的高度为 100%）。谢谢

4

2 回答 2

2

演示：http: //jsfiddle.net/iambriansreed/sAhmc/

删除了绝对元素上的浮动。向父级添加绝对位置并使用左侧和边距居中。删除了右边框上不需要的 margin-top。用类替换了边框 ID。

边框位于 1000 像素宽度之外。

#container>.border{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    background-image: url('../img/border.gif');
    background-repeat:repeat-y;
}
#container>.border.left{
    left: -5px;
    background-color: red; /* demo */
}
#container>.border.right{
    right: -5px;
    background-color: blue; /* demo */
}
#container{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px; /* demo */
    left: 50%;
    margin-left: -50px; /* half of width */
    text-align: left;
    padding-top: 90px;
    overflow: visible;
    background: #eee; /* demo */
}​
于 2012-09-10T15:18:04.700 回答
1

我认为添加一个“位置：相对；” #container 元素的规则应该适合您。

于 2012-09-10T15:15:09.207 回答