Question

您可以访问我正在处理的网站here。目前，我正在努力使网站相对。我正在调整CSS以获得宽度小于820px的分辨率。这涉及从pic of navigation at wide resolution http://oi57.tinypic.com/2sbld1s.jpg

调整菜单

到此pic of navigation at narrow resolution http://oi58.tinypic.com/qqswuo.jpg。正如你所看到的，我已经用红色边框勾勒出我的div来演示这个问题。我想将菜单栏下沉到其父div的底部。但是，将其设置为bottom: 0没有任何变化。如何才能让div class="nav"以低于820px的分辨率沉入div class="header"的底部？

这是我的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; 
}

我知道这是很多代码，我道歉。我只是想确保包含可能导致我的问题的所有定位属性。如果我能澄清任何事情，请告诉我，我感谢您的时间和建议。

Answer 1

要使bottom:0起作用，您需要将其应用的元素置于绝对位置。在这种情况下，您还需要让它的父级相对定位。试试这个：

.nav ul li {
    display: inline-block;
    margin-right: 70px;
    position:absolute;
    bottom:0;
}

Answer 2

添加位置值将解决您的问题。请在以下部分更新您的CSS。

@media screen and (max-width: 820px) {
.nav {
border: 2px solid red;
bottom: 0px;
position:absolute;
left:16%;
}
}

Answer 3

底部：0;要工作，你的class =“nav”必须有绝对的定位。

CSS：

.nav {
position: absolute;
bottom: 0;

在另一个Div内对齐Div

3 个答案: