Выровняйте Div внизу по основному Div

У меня есть два divs, один внутри другого, и я хотел бы, чтобы маленький div был выровнен по баттому основного div.

Вот мой код до сих пор. В настоящее время кнопка находится в верхней части главного div, вместо этого я хочу, чтобы она располагалась внизу. Любая помощь будет оценена.

.vertical_banner {
    border: 1px solid #E9E3DD;
    float: left;
    height: 210px;
    margin: 2px;
    padding: 4px 2px 10px 10px;
    text-align: left;
    width: 117px;
}

#bottom_link{
 vertical-align: bottom;
}

Вот как я пытался его использовать, но, как вы можете видеть, я все еще новичок в CSS:)

<div class="vertical_banner">
    <div id="bottom_link">
         <input type="submit" value="Continue">
       </div>
</div>

Ответы

Ответ 1

Измените свой CSS следующим образом:

.vertical_banner {
    border: 1px solid #E9E3DD;
    float: left;
    height: 210px;
    margin: 2px;
    padding: 4px 2px 10px 10px;
    text-align: left;
    width: 117px;
    position:relative;
}

#bottom_link{
   position:absolute;                  /* added */
   bottom:0;                           /* added */
   left:0;                           /* added */
}

<div class="vertical_banner">
    <div id="bottom_link">
         <input type="submit" value="Continue">
       </div>
</div>

Ответ 2

Дайте родительскому div position: relative, затем дайте вашему ребенку div position: absolute, это будет абсолютная позиция div внутри его родителя, тогда вы можете дать ребенку bottom: 0px;

См. пример здесь:

http://jsfiddle.net/PGMqs/1/

Ответ 3

Думаю, вам понадобится абсолютная позиция

.vertical_banner {position:relative;}
#bottom_link{position:absolute; bottom:0;}

Ответ 4

Это не совсем возможно в HTML, если вы не используете абсолютное позиционирование или javascript. Таким образом, одним из решений было бы предоставить этот CSS для #bottom_link:

#bottom_link {
    position:absolute;
    bottom:0;
}

В противном случае вам придется использовать некоторые javascript. Здесь блок jQuery, который должен делать трюк, в зависимости от простоты страницы.

$('#bottom_link').css({
    position: 'relative',
    top: $(this).parent().height() - $(this).height()
});

Ответ 5

Пожалуйста, попробуйте следующее:

#b {
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: inline-flex;

-webkit-flex-flow: row nowrap;
-moz-flex-flow: row nowrap;
flex-flow: row nowrap;

-webkit-align-items: flex-end;
-moz-align-items: flex-end;
align-items: flex-end;}

Вот демон JSFiddle: http://jsfiddle.net/rudiedirkx/7FGKN/.