将多个子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，输出

对于相同的问题，我已经经历了多个建议，但找不到解决方案。

Answer 1

尝试下面的代码，它将在.red类中创建ap标签。 这是您要找的东西吗？

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