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

Question

我在 HTML 页面中有一个包含 child 个元素的元素

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

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

的例子

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

我试过使用 verticle-align: 底部和带有 table 的定位元素（有效）但是它们无法动态添加更多 child 元素到 parentdiv

Answer 1

选项 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，所以这可能会得到改进。

Answer 2

这可能是一个没有像老学校那样的学校的案例

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

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

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

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

Align Left and Right floats to bottom of Parent div

html

css

css-float

vertical-alignment