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

Question

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

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

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

和我想知道如何有子div对齐到父div的底部(不使用我在网上找到的绝对位置答案，如果可能的话，我想保持浮动属性)

我已经尝试使用ververtical -align: bottom和定位元素与表(工作)，但他们不会动态添加更多的子元素到父div

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:使用flexx(仍然使用包装器)

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

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