[英]Aligning Div inside another Div
您可以在此處訪問我正在研究的站點。 目前,我正在努力使網站具有相對性。 我正在調整CSS,以使其寬度小於820px。 這涉及從此調整菜單
對此 。 如您所見,我用紅色邊框勾勒了我的div以演示該問題。 我想菜單欄下沉到其父div的底部。 但是,將其設置為bottom: 0
不會更改。 如何使div class="nav"
下沉到div class="header"
的底部,且分辨率小於820px?
這是我的HTML
<div class="header">
<div id="narrow-logo"><a href="#"><img src="Images/pantry logo.png" width="536" height="348"></a></div>
<div class="nav">
<ul>
<li class="link"><a href="#">HOME</a></li>
<li class="link"><a href="#">MENU</a></li>
<li id="logo"><a href="#"><img src="Images/pantry logo.png" width="536" height="348"></a></li>
<li class="link"><a href="#">CONTACT</a></li>
<li class="link"><a href="#">ABOUT</a></li>
</ul>
</div>
</div>
還有我的CSS
.header {
width: 960px;
height: 150px;
margin: 0 auto;
text-align: center;
position: relative;
padding: 100px 0px 0px 0px;
}
.header div#narrow-logo {
display: none;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
margin-right: 70px;
}
#logo a img {
max-width: 250px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#logo {
width: 250px;
position: relative;
}
@media screen and (max-width: 1080px) {
.header {
width: 700px;
height: 125px;
padding: 75px 0px 0px 0px;
}
#logo a img {
max-width: 180px;
}
#logo {
width: 180px;
}
@media screen and (max-width: 820px) {
.header {
border: 2px solid red;
width: 475px;
padding: 0;
margin-top: 40px;
height: 200px;
}
.header div#narrow-logo {
border: 2px solid red;
display: inherit;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
.header div#narrow-logo a img {
width: 200px;
height: auto;
}
.nav {
border: 2px solid red;
bottom: 0px;
}
.nav ul li {
margin-right: 25px;
}
.nav ul li:nth-child(3) {
display: none;
}
#logo a img {
display: none;
}
#logo {
width: 0;
}
我知道很多代碼,對不起。 我只是想確保我包含了所有可能導致問題的定位屬性。 讓我知道是否可以澄清任何事情,感謝您的寶貴時間和建議。
為了使bottom:0
正常工作,您需要對其應用的元素進行絕對定位。 在這種情況下,您還需要相對定位其父級。 嘗試這個:
.nav ul li {
display: inline-block;
margin-right: 70px;
position:absolute;
bottom:0;
}
添加頭寸值將解決您的問題。請在以下部分中更新您的CSS。
@media screen and (max-width: 820px) {
.nav {
border: 2px solid red;
bottom: 0px;
position:absolute;
left:16%;
}
}
對於底部:0; 要工作,您的class =“ nav”必須具有絕對的定位。
CSS:
.nav {
position: absolute;
bottom: 0;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.