[英]Aligning Div inside another Div
You can visit the site I am working on here . 您可以在此处访问我正在研究的站点。 Currently, I am working on making the site relative.
目前,我正在努力使网站具有相对性。 I am adjusting the CSS for a resolution with a width less than 820px.
我正在调整CSS,以使其宽度小于820px。 This involves adjusting the menu from this
这涉及从此调整菜单
to this 对此
.
。 As you can see, I have outlined my divs with a red border to demonstrate the problem.
如您所见,我用红色边框勾勒了我的div以演示该问题。 I want to the menu bar to sink to the bottom of its parent div.
我想菜单栏下沉到其父div的底部。 However, setting it to
bottom: 0
nothing changes. 但是,将其设置为
bottom: 0
不会更改。 How can I get the div class="nav"
to sink to the bottom of div class="header"
at a resolution of less than 820px? 如何使
div class="nav"
下沉到div class="header"
的底部,且分辨率小于820px?
Here is my HTML 这是我的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>
And my CSS 还有我的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.
让我知道是否可以澄清任何事情,感谢您的宝贵时间和建议。
For bottom:0
to work, you need the element that it's being applied to to be absolutely positioned. 为了使
bottom:0
正常工作,您需要对其应用的元素进行绝对定位。 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;
}
Adding position value will resolve your issue.Please update your css in the following section. 添加头寸值将解决您的问题。请在以下部分中更新您的CSS。
@media screen and (max-width: 820px) {
.nav {
border: 2px solid red;
bottom: 0px;
position:absolute;
left:16%;
}
}
For bottom:0; 对于底部:0; to work, your class="nav" has to have absolute positioning.
要工作,您的class =“ nav”必须具有绝对的定位。
CSS: CSS:
.nav {
position: absolute;
bottom: 0;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.