将div定位在另一个div的底部附近
[英]Positioning a div near bottom side of another div
问题描述
I have outer div and inner div. 
我有外部div和内部div。 I need to place inner div at the bottom of the outer one. 我需要将内部div放在外部底部。
Outer div is elastic (width: 70% for example). 外部div是弹性的（宽度：例如70％）。 I also need to center inner block. 我还需要居中内部区块。
Simple model of described make-up is shown on the picture below: 所描述化妆的简单模型如下图所示：
4 个解决方案
解决方案1
79 已采纳 2009-05-13 13:35:50
Tested and working on Firefox 3, Chrome 1, and IE 6, 7 and 8: 测试并使用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>
Live version here: http://jsfiddle.net/RichieHindle/CresX/ 现场版： http ： //jsfiddle.net/RichieHindle/CresX/
解决方案2
12 2009-05-13 13:40:42
You need a wrapping div for the bottom one, in order to center it. 你需要一个底部的包装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>
解决方案3
6 2015-08-15 04:02:11
CSS3 Flexbox allows the bottom positioning very easily. CSS3 Flexbox可以非常轻松地进行底部定位。 Check the Flexbox support table 检查Flexbox支持表
HTML HTML
<div class="outer">
<div class="inner">
</div>
</div>
CSS CSS
.outer {
display: flex;
justify-content: center; /* Center content inside */
}
.inner {
align-self: flex-end; /* At the bottom of the parent */
}
Output: 输出：
.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>
解决方案4
5 2009-05-13 14:21:59
Works well on all browsers including ie6. 适用于所有浏览器，包括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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.