元素相對位置在右邊：元素的0

我試圖實現沿着1000px固定寬度頁面的左側和右側的虛線（自定義）無聊。元素相對位置在右邊：元素的0

左邊的一個是好的，這部作品一種享受：

#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％的瀏覽器窗口）。謝謝

來源

2012-09-10 zomboble

你不能漂浮東西，絕對把它放在你的邊界左邊的例子中。 –

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

移除上絕對元素浮動。向父母添加絕對位置並使用左側和空白處居中。刪除右邊框上不需要的頁邊距。用類替換邊界id。

邊框位於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 */ 
}

來源

2012-09-10 15:18:04 iambriansreed

非常感謝你！在這個問題上只有一個問題，我怎樣才能讓它走到頂部：0到底部：0.它完成了中間內容的高度（只有大約500px） – zomboble

@zomboble你是否希望邊界div的高度爲窗戶？ – iambriansreed

是的，如果它是所有可能的。 – zomboble

我認爲增加一個「職位：親戚」規則到#container元素應該爲你工作。

來源

2012-09-10 15:15:09

元素相對位置在右邊：元素的0

回答

相關問題