將多個子div附加到父div

我想將所有子div附加到父div的底部。這裏是我到目前爲止的代碼：將多個子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

我已經通過多項建議走了同樣的問題，但我無法找到一個解決方案。

來源

2016-06-12 slayer

你想要什麼是不可能的純CSS。你需要使用一些JS。 – LXXIII

是的，我用JS來追加孩子到父div。與http://www.w3schools.com/jsref/met_node_appendchild.asp相同，但仍然不起作用:( – slayer

我覺得你不太清楚你想要什麼，因爲你已經有了一些子元素。現在如果你正在計劃添加更多，然後對齊，然後在父div的底部，那麼你已經去與JS – frnt

如果你要每個孩子都可以垂直追加，使用CSS：

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

來源

2016-06-12 09:47:29 sabith

是的。它的工作。謝謝很多:) – slayer

那麼這整個事情似乎有點多餘。 Div是默認的塊元素，爲什麼需要浮動和清除？ – Aziz

請嘗試下面的代碼，它會在您的.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);

來源

2016-06-12 09:21:45 frnt

將多個子div附加到父div

回答

相關問題