Я пытаюсь выровнять несколько div (buttonNav) до нижней части контейнера div (lowerNav). Я прочитал каждый вопрос по этому поводу и попробовал CSS, и он, похоже, не работает. Я попробовал это: складывая Divs from Bottom to Top, другие люди, надеясь, что кто-то сможет помочь.
Вот мой html, у меня есть 5 контейнеров lowerNav, каждый из которых содержит несколько кнопок buttonNavs, которые я хочу выровнять по нижней части lowerNav, вот код от одного, все они настроены одинаково:
<div class="lowerNav">
<img src="image/contact-us.gif" width="126" height="27" alt=""/>
<p>Ready to get more information or contact us directly?</p>
<div class="buttonNav">
<p><a href="">Order Literature</a></p>
</div>
<div class="buttonNav">
<p><a href="">Downloads</a></p>
</div>
<div class="buttonNav">
<p><a href="">Email Sign-Up</a></p>
</div>
<div class="buttonNav">
<p><a href="">Meet Your Rep</a></p>
</div>
<div class="buttonNav">
<p><a href="">Ask a Question</a></p>
</div>
</div>
Вот мой CSS:
.lowerNav {
width: 160px;
height: 325px;
background-color: #e3dfd7;
border: 3px solid #383431;
float: left;
margin: 15px 8px 0px 8px;
text-align: left;
display: table-cell;
vertical-align: bottom;
}
.lowerNav p {
padding: 5px 12px 12px 12px;
}
.lowerNav img {
padding-top: 12px;
}
.buttonNav {
background:url(image/button-lowerNav.jpg);
width: 160px;
height: 45px;
display: inline-block;
}
.buttonNav p {
text-align:center;
padding-top: 14px;
}
.buttonNav a {
color: #fff;
font-size: 13px;
text-decoration:none;
font-weight:700;
}
.buttonNav a:hover {
color: #fff;
font-size: 13px;
text-decoration:underline;
font-weight:700;
}
Поскольку контейнер (.lowerNav
) имеет фиксированную высоту, и вы знаете размер его содержимого, это довольно просто сделать с абсолютным позиционированием.
HTML:
<div class="outer">
Hello up here!
<ul class="inner">
<li><a href="#">Hello</a></li>
<li><a href="#">down</a></li>
<li><a href="#">there!</a></li>
</ul>
</div>
CSS:
.outer {
position: relative;
height: 200px;
}
.inner {
position: absolute;
bottom: 0;
}
Проверьте этот код для живого примера этого кода: http://codepen.io/EvilOatmeal/pen/fCzIv