如何将 div 对齐到 HTML 中另一个 div 的底部？

Question

如何将 div 对齐到 HTML 中另一个 div 的底部？为什么它不起作用？ HTML:

<div id="big">
      <div class="small">1</div>
      <div class="small">2</div>
      <div class="small">3</div>
</div>

CSS:

#big {
    background-color: red;
    margin: 10px;
}

.small {
    width: 150px;
    height: 150px;
    background-color: blue;
    float: left;
    display: inline-block;
    position: absolute;
    bottom: 0px;
    margin: 10px;
    display: inline-block;
}

Answer 1

这是你要找的吗？ http://jsfiddle.net/swm53ran/94/

应该改为

position: relative;

Answer 2

将以下内容添加到您的 CSS Class：

bottom:0 !important;

并删除位置部分。

Answer 3

试试这个

    #big {
    background-color: red;
    margin: 10px;
    width: 150px; //new line
}

.small {
    width: 150px;
    height: 150px;
    background-color: blue;
    float: left;
    position: relative; // new line
    margin: 10px;
}

直播jsfiddle

更新：这样可以吗？ Jsfiddle

Answer 4

这将起作用： http://jsfiddle.net/4f4ejwr0/5/

#big {
  background-color: red;
  margin: 10px;
  position: relative;
  height: 300px;
}
#bottom {
  position: absolute;
  bottom: 0px;
  margin: 10px;
}
.small {
  width: 150px;
  height: 150px;
  background-color: blue;
  float: left;
  margin-left: 10px;
}

<div id="big">
  <div id="bottom">
    <div class="small">1</div>
    <div class="small">2</div>
    <div class="small">3</div>
  </div>
</div>

Answer 5

你的问题不清楚，但你的意思是这样吗？..

#big {
    display:table-cell;
    position:relative;
    vertical-align:bottom;
    background-color: red; margin: 10px; width: 800px; height: 300px;
}

.small {
    display: inline-block; 
    width: 150px; height: 150px; background-color: blue; 
    margin: 10px;
}

<div id="big">
      <div class="small">1</div>
      <div class="small">2</div>
      <div class="small">3</div>
</div>

如何将 div 对齐到 HTML 中另一个 div 的底部？

How to align div to the bottom of another div in HTML?

html

css

alignment