如何對齊絕對位置和相對位置之間的div

我有3個div。第一個div位於頂部，第二個div位於底部，其位置是絕對位置。還有第三個div，我希望它在中間。我希望第三個div在中間，這樣無論我改變瀏覽器的高度，我都希望它可以用20px填充值進行分配，具體取決於第一個和第二個。如何對齊絕對位置和相對位置之間的div

middle-box{ 
padding: 20px; 
} 

.top-box{ 
width: 265px; 
position: relative; 
margin: 0px auto; 
} 

.bottom-box{ 
width: 25%; 
padding: 12px 0 12px; 
position: absolute; 
bottom: 0px; 
min-width: 300px; 
}

來源

2013-03-27 TSkora

我認爲這將是棘手的，因爲position：absolute;不保留頁面上的原始空間，所以你不會知道它有多高，但我確定它可能的，祝你好運 – iConnor 2013-03-27 00:51:03

「20px間隔」是什麼意思？ – isherwood 2013-03-27 01:02:08

根據其他兩個div，我希望中間div有20px的保證金頂部和底部保證金。所以div的高度並不重要，但我希望它的頂部和底部div之間有20px的間隔。 – TSkora 2013-03-27 01:10:03

在這個同樣的問題上的變化已被問幾十次SO。你想要20px頁邊距的事實是無關緊要的。這是一個棘手的整體結構。

我認爲這符合您的要求。您可能必須做出的一個妥協方案是在頁眉和頁腳上設置固定高度。

http://jsfiddle.net/Fd6f9/1

.top-box { 
    height: 60px; 
    position: relative; 
} 
.middle-box { 
    position: absolute; 
    top: 70px; 
    bottom: 80px; 
    left: 20px; 
    right: 20px; 
    margin: 20px 0; 
} 
.bottom-box { 
    height: 56px; 
    padding: 12px 0 12px; 
    position: absolute; 
    bottom: 0px; 
}

來源

2013-03-27 02:07:37 isherwood

如果您選擇讓您的底部箱「卡殼」的瀏覽器窗口的底部，你有你中間框和底框之間的可變空間，取決於中間框中有多少內容以及瀏覽器窗口的大小。如果您希望div之間的間距一致，則需要刪除絕對位置。

此外，我強烈建議將您的CSS從課程更改爲ids（。到＃）。你忘記了中間框上的class/id標記，這樣可能也會導致問題。

請記住，填充會影響你的div的內部，而邊距會影響外部。

此代碼是否爲您提供了您要找的內容？（我加了背景顏色只是一個視覺所以我可以看到發生了什麼事到的div）。

<style type="text/css"> 
#top-box { 
    width: 265px; 
    position: relative; 
    margin: 0px auto; 
    background-color: #DDD; 
} 
#middle-box{ 
    margin: 20px 0; 
    padding: 20px; 
    background-color: #AAA; 
} 
#bottom-box{ 
    width: 25%; 
    padding: 12px 0 12px; 
    bottom: 0px; 
    min-width: 300px; 
    background-color: #888; 
} 
</style> 
</head> 
<body> 
<div id="top-box">something in the top goes here</div> 
<div id="middle-box">something in the middle here.</div> 
<div id="bottom-box">something at the bottom.</div> 
</body>

很難知道還有什麼要告訴你不知道你打算用這些div做什麼。希望這可以幫助！

來源

2013-03-27 02:08:21

如何對齊絕對位置和相對位置之間的div

回答

相關問題