如何将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

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

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

Answer 2

这将有效： http://jsfiddle.net/4f4ejwr0/5/

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

应改为

position: relative;

Answer 4

将以下内容添加到CSS类：

bottom:0 !important;

并删除位置部分。

Answer 5

试试这个

    #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