将Div对准另一个Div [英] Aligning Div inside another Div
问题描述
您可以访问我正在使用的网站
You can visit the site I am working on
对此.如您所见,我用红色边框勾勒了我的div以演示该问题.我想要菜单栏下沉到其父div的底部.但是,将其设置为bottom: 0
不会发生任何变化.如何使div class="nav"
以小于820px的分辨率沉入div class="header"
的底部?
to this . As you can see, I have outlined my divs with a red border to demonstrate the problem. I want to the menu bar to sink to the bottom of its parent div. However, setting it to bottom: 0
nothing changes. How can I get the div class="nav"
to sink to the bottom of div class="header"
at a resolution of less than 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;
}
我知道很多代码,对不起.我只是想确保我包含了所有可能导致我的问题的定位属性.让我知道是否可以澄清任何事情,感谢您的宝贵时间和建议.
I know that is a lot of code and I apologize. I just wanted to make sure I included all positioning attributes that could be causing my issue. Let me know if I can clarify anything, and I appreciate your time and advice.
推荐答案
要使bottom:0
正常工作,您需要将要应用的元素绝对定位.在这种情况下,您还需要相对定位其父级.试试这个:
For bottom:0
to work, you need the element that it's being applied to to be absolutely positioned. You also need, in this case, to have it's parent relatively positioned. Try this:
.nav ul li {
display: inline-block;
margin-right: 70px;
position:absolute;
bottom:0;
}
这篇关于将Div对准另一个Div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!