将多个子div附加到父div

Question

我想将所有子div附加到父div的底部。 到目前为止，这是我的代码：

.valign {

  display: inline-block;

  width: 100%;

  position: relative;

}

.block {

  display: inline-block;

  max-width: 75%;

}

.red {

  float: left;

  padding: 10px;

  background-color: red;

}

.yellow {

  float: left;

  padding: 10px;

  background-color: yellow;

}

.green {

  float: left;

  padding: 10px;

  background-color: green;

}

<div class="valign">
  <div>
    <div class="block red">my bottom aligned div 1</div>
    <div class="block yellow">my bottom aligned div 2</div>
    <div class="block green">my bottom aligned div 3</div>
  </div>
</div>

jsBin：http://jsbin.com/bahasotofo/edit?html,css,js,output

我已经针对同一个问题提出了多项建议，但我找不到解决方案。

Answer 1

尝试以下代码，它会在.red类中创建一个p标记。这是你正在寻找的。

var rd = document.querySelector(".red");
var rdp = document.createElement("p");
var rdpt = document.createTextNode("my bottom aligned div 1");
rdp.appendChild(rdpt);
rd.appendChild(rdp);

Answer 2

如果您希望垂直附加每个孩子，请使用此CSS：

.block {     
    display: inline-block;
    max-width: 75%;
    clear:both;
}