メインディビジョンの下のDivを

Question

私は2つのdivを持っています。もう1つは内側にあり、小さなdivはメインdivのbuttomに揃えてください。

ここまでは私のコードです。現在、ボタンはメイン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

絶対配置やJavaScriptを使用しない限り、これはHTMLでは実際には不可能です。だから、一つの解決策は、#bottom_linkに、このCSSを与えることになります：

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

そうしないと、あなたは、いくつかのJavaScriptを使用する必要があると思います。ここでは、ページの単純さに応じて、このトリックを行うべきjQueryブロックを示します。

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

Answer 4

ここでの例を参照してください、あなたが子供にbottom: 0px;

を与えることができ、その親の内側にあなたの子供のdiv position: absolute、この意志絶対位置のdivを与え、あなたの親のdiv position: relativeを与える：

を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/です。