Процент 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 * 22% 300px + 3 * 4% 300px = 300px где

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% для первых трех детей и ни для последнего это сделать,

.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 рассчитано на ширину, вы можете посмотреть на flexboxes.