html - div浮动在另一个div上 - div覆盖



将div放置在另一个div的底部附近 (3)

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

外部div有弹性(例如宽度:70%)。 我也需要以内线为中心。

描述化妆的简单模型如下图所示:

https://src-bin.com


Answer #1

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>


Answer #2

你需要一个包装的底部的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>

Answer #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>




layout