在底部对齐Div Div

Question

我有两个div，一个在另一个里面，我希望小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> 

Answer 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>

Answer 2

我想你需要绝对位置

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

Answer 3

这不是真的可以在HTML中，除非你使用绝对定位或JavaScript。所以，一个解决办法是给这个CSS来#bottom_link：

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

否则，你不得不使用一些JavaScript。这里有一个jQuery代码块，应该可以实现，取决于页面的简单性。

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

Answer 4

给你的父母DIV position: relative，然后给你的孩子DIV position: absolute，这将绝对位置其父在div，那么你可以在这里给孩子bottom: 0px;

见例如：

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

Answer 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/。