Question

除了使用vertical-align之外，我还没有尝试过任何其他功能，但它没有做任何事情。

这是我的代码。

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

这是图像。

我想要达到的目标就是这样。

Answer 1

如果您有以下结构：

<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 */
}

在div内部的div

1 个答案: