CSS百分比不正确

CSS Percent Not Working Correct

本文关键字：不正确 百分比 CSS      更新时间：2023-09-26

网页有一个包含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是子容器之间的空格/边距的数量

但事实并非如此。根据浏览器的大小，子容器可能有多小，甚至会移动到父容器之外。有人能帮我找不到什么吗？

谢谢！

您对"4*22%+3*4%=100%"的假设是不正确的，应该是"4*220%+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;
}

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

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

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

相关文章：