将div放在另一个div的底部附近
我有外部div和内部div。 我需要将内部div放在外部的底部。
外面的div是弹性的（宽度：例如70％）。 我也需要中心内部块。
描述化妆的简单模型如下图所示：
testing并使用Firefox 3，Chrome 1和IE 6,7和8：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><body> <div style='background-color: yellow; width: 70%; height: 100px; position: relative;'> Outer <div style='background-color: green; position: absolute; left: 0; width: 100%; bottom: 0;'> <div style='background-color: magenta; width: 100px; height: 30px; margin: 0 auto; text-align: center'> Inner </div> </div> </div> </body> </html> 现场直播版本： http : //jsfiddle.net/RichieHindle/CresX/
你需要一个包装的底部的div，为了居中。
<style> /* making it look like your nice illustration */ #outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; } #inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; } /* positioning the boxes correctly */ #outer { position: relative; } #wrapper { position: absolute; bottom: 3px; width: 100%; } #inner { margin: 0 auto; } </style> <div id="outer"> <div id="wrapper"><div id="inner"></div></div> </div>
包括ie6在内的所有浏览器都能正常工作。
<style> #outer{ width: 70%; background-color: #F2F2CC; border: 1px solid #C0C0C0; height: 500px; position: relative; text-align: center; } #inner{ background-color: #FF0080; border: 1px solid black; width: 30px; height: 20px; /* Position at the bottom */ position: relative; top: 95%; /* Center */ margin: 0 auto; text-align: left; } </style> <div id="outer"> <div id="inner"> </div> </div>
CSS3 Flexbox允许底部定位非常容易。 检查Flexbox支持表
HTML
<div class="outer"> <div class="inner"> </div> </div>
CSS
.outer { display: flex; justify-content: center; /* Center content inside */ } .inner { align-self: flex-end; /* At the bottom of the parent */ }
输出：
.outer { background: #F2F2CD; display: flex; width: 70%; height: 200px; border: 2px solid #C2C2C3; justify-content: center; } .inner { background: #FF0081; width: 75px; height: 50px; border: 2px solid #810000; align-self: flex-end; }
<div class="outer"> <div class="inner"> </div> </div>
