CSS百分比無法正常工作

Question

該網頁有一個帶有4個子容器的父容器。 草圖：

---------------
|  Child 0    |
|-------------|
|  Child 1    |
|-------------|
|  Child 2    |
|-------------|
|  Child 3    |
---------------

CSS

.Parent {
    float: right;
    height: 300px;
    width: 25%;
}
.Child {
   height: 22%;
   margin-bottom: 4%; 
}

使用Javascript

var pParent = document.getElementById("id");
pParent.className = "Parent";
for(var k = 0; k < 4; ++k) {
    var pChild = document.createElement("div");
    pChild.className = "Child";
    pParent.appendChild(pChild);
}        

4個子容器應完全適合父容器：

4 * 22％+ 3 * 4％= 100％或

300像素的4 * 22％+ 300像素的3 * 4％= 300像素

4是子容器的數量，

3是子容器之間的空格/邊距數

但是他們沒有。 根據瀏覽器的大小，子容器可能很大，甚至很小，甚至可能移出父容器。 誰能幫我我所缺少的嗎？

謝謝！

Answer 1

您對“ 4 * 22％+ 3 * 4％= 100％”的假設是不正確的，而是“ 4 * 22％+ 4 * 4％= 104％”，因為對於每個這些孩子。 嘗試這個，

.Parent {
    float: right;
    height: 300px;
    width: 25%;
}
.Child {
   height: 22%;
   margin-bottom: 3%; 
}

或者，如果您想讓頁margin-bottom: 4%前三個孩子為margin-bottom: 4% ，最后一個孩子為不，

.Parent {
        float: right;
        height: 300px;
        width: 25%;
    }
    .Child {
       height: 22%;
       margin-bottom: 4%; 
    }
.Parent:last-child{
        height: 22%;
       margin-bottom: none;
}

Answer 2

您的問題是幾個錯誤的組合：

1. 簡單的數學-底邊出現4次，而不是3次。（22 + 4）* 4 = 104。
2. margin-bottom: xx% -您期望這是父級高度的百分比，但實際上，即使對於margin-bottom ，父級寬度也是計算頁邊距的來源。

Answer 3

margin-bottom是根據寬度計算的，您可能需要查看flexbox。