底部div div内

-1

我没有尝试过其他任何东西，除了使用垂直对齐，但它没有做任何事情。底部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

回答

相关问题