CSS百分比无法正常工作

Question

The webpage has a parent container with 4 child containers. Sketch:

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

The 4 child containers should fit perfectly into the parent container:

4 * 22% + 3 * 4% = 100% or

4 * 22% of 300px + 3 * 4% of 300px = 300px where

4 is the number child containers and

3 is the number of spaces/margins between the child containers

But they do not. Depending on the browser size, the child containers may be much to small or even move outside of the parent container. Can anyone help me what I am missing?

Thanks!

Answer 1

Your assumption of "4 * 22% + 3 * 4% = 100%" is not correct, it would be, "4 * 22% + 4* 4% = 104%" because a margin-bottom would be applied for each of the children. Try this,

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

Alternatively, if you want to have margin-bottom: 4% for first three children and none for the last one do this,

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

Answer 2

Your problem is a combination of several mistakes:

1. Simple math - margin-bottom appears 4 times, not 3. (22+4)*4 = 104.
2. margin-bottom: xx% - you expect that to be a percentage of the parent height, but actually the parent width is the source for calculating the margin, even for margin-bottom .

Answer 3

margin-bottom是根据宽度计算的，您可能需要查看flexbox。