Question

我试图在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％的浏览器窗口）。感谢

Answer 1

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

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

Borders位于1000px宽度之外。

#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 */
}

Answer 2

我认为增加一个“位置：亲戚;”对#container元素的规则应该适合你。

元素相对位置向右：元素为0

2 个答案: