爲什麼我的位置：絕對孩子溢出父母的邊界？

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>