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

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

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

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

我仍然可以使用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">

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

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

2 个答案: