将 div 定位在另一个 div 的底部附近答案

【问题标题】：Positioning a div near bottom side of another div将 div 定位在另一个 div 的底部附近
【发布时间】：2010-10-25 20:49:39
【问题描述】：

我有外部 div 和内部 div。我需要将内部 div 放在外部的底部。

外部 div 是有弹性的（例如宽度：70%）。我还需要将内部块居中。

所描述的妆容的简单模型如下图所示：

【问题讨论】：

高度也有弹性吗？如果没有，您可以将内框的 margin-top 设置为 (outerBoxHeight - innerBoxHeight)。
@peirix: 是的，外部方块的高度可以改变，我们不知道

标签： html css layout

【解决方案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>

【讨论】：