div内の一番下のdiv

-1

私はvertical-alignを使う以外は何も試しませんでしたが、何もしませんでした。div内の一番下のdiv

ここに私のコードです。

<html> 
    <div id="banner"> 
      <h2><span>HIGH QUALITY</span></h2> 
      <h3>CRAFTMANSHIP AT LOW EVERYDAY PRICES</h3> 
      <p> 
      <a href="">LEARN MORE</a> 
      <a href="">CALL US NOW</a> 
      </p> 
    </div> 
</html> 

    <style> 
     #banner {background-image: url(../images/common/banner.png);background- 
     repeat: no-repeat;background-size: cover;font-family: 'Roboto 
     Slab',serif;color:#fff;height:730px;width: 1440px;} 
     #banner {vertical-align: bottom;display:inline-block;vertical-align: 
     bottom;} 
     #banner h2 span{background-image: 
     url(../images/common/orngebck.png);width:700px;padding:3px 120px 
     3px 120px;} 
     #banner a{padding:11px 20px;margin:0px;border:1px solid #fff;display: 
     inline-block;vertical-align: bottom;} 
     #banner a:hover{padding:11px 20px;margin:0px;border:1px solid 
     #F24134;background-color:#F24134;} 
     #banner h2{font-size:3.125em;font-weight:100;} 
     #banner h3{font-size:2.5em;font-weight:100;letter-spacing: 1px;} 
    </style>

ここに画像があります。

私は何を達成したいことは、このようになります。

出典

2017-06-01 Charlese Virility

あなたは次のような構造がある場合：

<div id="outer-box"> 
    Normal text 
    <div id="inner-box"> 
     Stuff that should be displayed at the bottom 
    </div> 
</div>

をあなたが望むものを達成するために、次のCSSを使用することができます。

#outer-box { 
    position:relative; 
    /* your css code */ 
} 

#inner-box { 
    position:absolute; 
    bottom:0px; /* distance from the bottom, you can use left, right and top as well */ 
    /* your css code */ 
}

出典

2017-06-01 07:29:44 StuntHacks

答えて

関連する問題