javascript - 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% 或

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

4 是子容器的数量

3 是子容器之间的空格/边距数

但他们没有。根据浏览器的大小，子容器可能会很小，甚至会移到父容器之外。谁能帮我解决我所缺少的？

谢谢!

Answer 1

您对“4 * 22% + 3 * 4% = 100%”的假设是不正确的，它应该是“4 * 22% + 4* 4% = 104%”，因为将应用 margin 底部对于每个 child 。试试这个，

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

或者，如果您希望前三个 child 有 margin-bottom: 4% 而最后一个没有，请执行此操作，

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