将左右浮动对齐到父 div 的底部

Question

我在 HTML 页面中有一个带有子元素的元素

<div id="parent">
    <div class="child01"></div>
    <div class="child01"></div>
    <div class="child02"></div>
</div>

我在 http://jsfiddle.net/exu76qnx/ 有一个当前 css 的示例

我想知道如何让子 div 与父 div 的底部对齐（不使用我在网上找到的绝对位置答案，如果可能的话，我想保留 float 属性）

我尝试过使用 verticle-align: bottom 和定位元素与表格（有效），但是它们不适用于向父 div 动态添加更多子元素

Answer 1

这可能是没有学校像老学校的情况

我已经设法用我想避免的表格来做到这一点（但不如绝对定位）

http://jsfiddle.net/tefz80jq/

<!-- parent is now a table -->
<table id="parent" cellpadding="0" cellspacing="0" border="0">

<!-- table row handles bottom alignment -->
<tr valign="bottom">

我希望有一个类似的解决方案，能够动态添加符合现有定位的元素

Answer 2

选项 1：您可以在这些绝对定位的子项周围添加一个包装器。

然后您可以继续在该包装器中使用浮点数。

/*APPEARANCE*/

#parent {
  width: 80%;
  margin: 0 auto;
  height: 100px;
  background-color: #BBBBBB;
  position: relative;
}
.wrapper {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: lightblue;
}
.child01 {
  width: 70px;
  height: 70px;
  background-color: #888888;
}
.child02 {
  width: 50px;
  height: 30px;
  background-color: #888888;
}
/*POSITIONING*/

.child01 {
  margin-right: 20px;
  float: left;
}
.child02 {
  float: right;
}

<div id="parent">
  <div class="wrapper">
    <div class="child01"></div>
    <div class="child01"></div>
    <div class="child02"></div>
  </div>
</div>

选项 2：使用 Flexbox 替代（仍然使用包装器）

/*APPEARANCE*/

#parent {
  width: 80%;
  margin: 0 auto;
  height: 100px;
  background-color: #BBBBBB;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}
.wrapper {
  overflow: hidden;
  /* quick clearfix */
  background: lightblue;
}
.child01 {
  width: 70px;
  height: 70px;
  background-color: #888888;
}
.child02 {
  width: 50px;
  height: 30px;
  background-color: #888888;
}
/*POSITIONING*/

.child01 {
  margin-right: 20px;
  float: left;
}
.child02 {
  float: right;
}

<div id="parent">
  <div class="wrapper">
    <div class="child01"></div>
    <div class="child01"></div>
    <div class="child02"></div>
  </div>
</div>

我仍在处理flexbox，所以这可能会得到改进。