将 div 定位在另一个 div 的底部附近
Posted
技术标签:
【中文标题】将 div 定位在另一个 div 的底部附近【英文标题】：Positioning a div near bottom side of another div 【发布时间】：2010-10-25 20:49:39 【问题描述】：我有外部 div 和内部 div。我需要将内部 div 放在外部的底部。
外部 div 是有弹性的（例如宽度：70%）。我还需要将内部块居中。
所描述的妆容的简单模型如下图所示：
【问题讨论】：
高度也有弹性吗？如果没有，您可以将内框的 margin-top 设置为 (outerBoxHeight - innerBoxHeight)。 @peirix: 是的，外部方块的高度可以改变，我们不知道 【参考方案1】：CSS3 Flexbox 让底部定位非常容易。检查Flexbox support table
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>【讨论】：
【参考方案2】：在 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/
【讨论】：
谢谢，您的解决方案几乎是正确的。我只需要在 IE 的绿色块样式中添加“//margin-left: -40px”。如果没有这个带有 margin-left 属性的 hack，你的绿色块就会被丢弃在 IE7 中。谁能解释一下这个 40px 是从哪里来的？ IE7 将绿色 div 水平定位在“Outer”之后。我更新了代码以指定“left：0”。【参考方案3】：适用于所有浏览器，包括 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>
【讨论】：
前 95% 与底部 10 像素不同。您希望内框在调整屏幕大小时锚定在底部。【参考方案4】：您需要为底部的一个包装 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>
【讨论】：
以上是关于将 div 定位在另一个 div 的底部附近的主要内容，如果未能解决你的问题，请参考以下文章