親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

あなたはすべての子供が垂直方向に追加したい場合は、このCSSを使用：何がしたいことは、純粋なCSSでは不可能である

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

Answer 2

以下のコードを試してください。これは、あなたの.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);