底部div div内
问题描述:
我没有尝试过其他任何东西,除了使用垂直对齐,但它没有做任何事情。底部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>
这是图片。
我要实现的是这样的东西。
答
如果你有以下结构:
<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 */
}