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％或

300px的4 * 22％+ 300px的3 * 4％= 300px其中

4是子容器的数量和

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

但他们没有。根据浏览器的大小，子容器可能很小甚至移动到父容器之外。任何人都可以帮助我，我错过了吗？

谢谢！

Answer 1

您的假设是＆＃34; 4 * 22％+ 3 * 4％= 100％＆＃34;是不正确的，＆＃34; 4 * 22％+ 4 * 4％= 104％＆＃34;因为每个孩子都会申请保证金。试试这个，

.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

你的问题是几个错误的组合：

简单数学 - margin-bottom出现4次，而不是3.（22 + 4）* 4 = 104。
margin-bottom: xx% - 您希望它是父高度的百分比，但实际上父宽度是计算边距的来源，即使是margin-bottom也是如此。

Answer 3

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

CSS百分比不正常工作

3 个答案: