为什么我的位置：绝对孩子溢出父母的边界？

Question

我有一个父容器，里面有一些子组件。最后一个孩子必须放在容器的底部。我尝试使用justify-content: space-between，但它不适用于我，因为我需要最后一个元素和其他元素之间的空间更大，更明显。我结束了尝试position:absolute,bottom: 0，但孩子的宽度大于父母。

也许有更好的方法来做到这一点，通过与flex混合，只是无法做到这一点。

.Parent { 
 
    background: #F8F8F8; 
 
    height: 400px; 
 
    padding: 20px; 
 
    width: 395px; 
 
    position: relative; 
 
    max-width: 395px; 
 
    border: solid 1px red; 
 
} 
 

 
.First--Child { 
 
    border: solid 1px blue; 
 
    height: 40px; 
 
    margin: 10px 0; 
 
} 
 

 
.Second--Child { 
 
    border: solid 1px green; 
 
    height: 40px; 
 
    margin: 10px 0; 
 
} 
 

 
.Third--Child { 
 
    border: solid 1px violet; 
 
    height: 40px; 
 
    margin: 10px 0; 
 
} 
 

 
.Last--Child { 
 
    border: solid 1px cyan; 
 
    height: 60px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    margin: 0 0 10px 0; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.Left--Button, 
 
.Right--Button { 
 
    border: solid 1px gray; 
 
    width: calc(100% - 300px); 
 
}

<div class='Parent'> 
 
    <div class='First--Child'> 
 
    </div> 
 
    <div class='Second--Child'> 
 
    </div> 
 
    <div class='Third--Child'> 
 
    </div> 
 
    <div class='Last--Child'> 
 
    <button class='Left--Button'>Left</button> 
 
    <button class='Right--Button'>Right</button> 
 
    </div> 
 
</div>

Answer 1

最后一个孩子的宽度不大于父宽 - 它的宽度相同。这是导致它不符合的边际。

如果底部位置是适合您的需要是正确的，你可以得到的水平对齐方式排序是拆除父填充，设置孩子：

left: -20px 

或

margin-left: -20px 

，或添加

box-sizing:border-box 

给父母

Answer 2

如果必须使用此布局技术，你可以计算出最后的 - 孩子的宽度减去亲的填充。

.Parent { 
 
    background: #F8F8F8; 
 
    height: 400px; 
 
    padding: 20px; 
 
    width: 395px; 
 
    position: relative; 
 
    max-width: 395px; 
 
    border: solid 1px red; 
 
} 
 

 
.First--Child { 
 
    border: solid 1px blue; 
 
    height: 40px; 
 
    margin: 10px 0; 
 
} 
 

 
.Second--Child { 
 
    border: solid 1px green; 
 
    height: 40px; 
 
    margin: 10px 0; 
 
} 
 

 
.Third--Child { 
 
    border: solid 1px violet; 
 
    height: 40px; 
 
    margin: 10px 0; 
 
} 
 

 
.Last--Child { 
 
    border: solid 1px cyan; 
 
    height: 60px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: calc(100% - 40px); 
 
    margin: 0 0 10px 0; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.Left--Button, 
 
.Right--Button { 
 
    border: solid 1px gray; 
 
    width: calc(100% - 300px); 
 
}

<div class='Parent'> 
 
    <div class='First--Child'> 
 
    </div> 
 
    <div class='Second--Child'> 
 
    </div> 
 
    <div class='Third--Child'> 
 
    </div> 
 
    <div class='Last--Child'> 
 
    <button class='Left--Button'>Left</button> 
 
    <button class='Right--Button'>Right</button> 
 
    </div> 
 
</div>

Answer 3

试试这个为你的CSS。我将按钮分成两个类，并在添加填充高度百分比时将它们浮动。这是假设你没有绝对定位。

.Parent { 
     background: #F8F8F8; 
     height: 400px; 
     padding: 20px; 
     width: 395px; 
     position: relative; 
     max-width: 395px; 
     border: solid 1px red; 
    } 

    .First--Child { 
     border: solid 1px blue; 
     height: 40px; 
     margin: 10px 0; 
    } 

    .Second--Child { 
     border: solid 1px green; 
     height: 40px; 
     margin: 10px 0; 
    } 

    .Third--Child { 
     border: solid 1px violet; 
     height: 40px; 
     margin: 10px 0; 
    } 

    .Last--Child { 
     border: solid 1px cyan; 
     height: 60px; 
     position: absolute; 
     bottom: 0; 
     left: 0; 
     width: 100%; 
     display: block; 
     justify-content: space-between; 
    } 

    .Left--Button { 
     height:100%; 
     float:left; 
     border: solid 1px gray; 
     width: calc(100% - 300px); 
    } 
    .Right--Button { 
     height: 100%; 
     float: right; 
     border: solid 1px gray; 
     width: calc(100% - 300px); 
    } 

Answer 4

最后一个孩子被放置在容器的底部。我尝试使用justify-content: space-between，但它不适用于我，因为我需要最后一个元素和其他元素之间的空间更大，更明显。

随着justify-content: space-between（在垂直容器）或align-content: space-between（水平容器）可以钉住的最后一项的底部，并不会影响兄弟姐妹的位置，只是如果有两个项目（一个停留在顶部，另一个停留在底部）。

但是，如果有两个以上的项目，那么这种方法将无法工作，因为space-between在项目之间均匀分配空间，导致第一个和最后一个之间的项目分散。

由于您的容器中有两个以上的项目，因此需要使用其他方法。

绝对定位确实有效。它将最后一项放在底部。但是，它也会将项目从正常流程中移除，这意味着它不占用空间，并且兄弟姐妹可以重叠它。

但是，Flexbox提供了一种干净而高效的替代方案：auto margin。通过将最后一个项目设置为margin-top: auto，它将移动到容器的底部，同时其兄弟仍保留在顶部。

下面是一个完整的解释，其中包括space-between和经销商的利润率比较：

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

.Parent { 
 
    display: flex;    /* new */ 
 
    flex-direction: column;  /* new */ 
 
    height: 400px; 
 
    padding: 20px; 
 
    max-width: 395px; 
 
    border: solid 1px red; 
 
    background: #F8F8F8; 
 
} 
 

 
.First--Child { 
 
    border: solid 1px blue; 
 
    height: 40px; 
 
    margin: 10px 0; 
 
} 
 

 
.Second--Child { 
 
    border: solid 1px green; 
 
    height: 40px; 
 
    margin: 10px 0; 
 
} 
 

 
.Third--Child { 
 
    border: solid 1px violet; 
 
    height: 40px; 
 
    margin: 10px 0; 
 
} 
 

 
.Last--Child { 
 
    border: solid 1px cyan; 
 
    height: 60px; 
 
    margin: auto 0 10px 0;  /* adjustment to margin-top */ 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.Left--Button, 
 
.Right--Button { 
 
    border: solid 1px gray; 
 
    width: calc(100% - 300px); 
 
}

<div class='Parent'> 
 
    <div class='First--Child'></div> 
 
    <div class='Second--Child'></div> 
 
    <div class='Third--Child'></div> 
 
    <div class='Last--Child'> 
 
    <button class='Left--Button'>Left</button> 
 
    <button class='Right--Button'>Right</button> 
 
    </div> 
 
</div>