如何設定寬度等于max-width即使內容尚未完全填充到子 div 的最大寬度，并且子 div 始終以父級為中心，但如果父級 div 小于子div
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 3px dotted green;
}
.child {
max-width: 400px;
height: 100px;
padding: 16px;
color: white;
background: red;
}
.expected-width {
width: 400px;
text-align: center;
border: 1px dotted blue;
margin: 16px 0 0 0;
}<div class="parent">
<div class="child">contents</div>
<div class="expected-width">expected width</div>
</div>uj5u.com熱心網友回復：
如果您將 width: 100% 添加到 child，您將獲得相同的寬度
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 3px dotted green;
}
.child {
max-width: 400px;
width: 100%;
height: 100px;
padding: 16px;
color: white;
background: red;
}
.expected-width {
width: 400px;
text-align: center;
border: 1px dotted blue;
margin: 16px 0 0 0;
}<div class="parent">
<div class="child">contents</div>
<div class="expected-width">expected width</div>
</div>uj5u.com熱心網友回復：
如果我正確理解了您的問題并且您希望您的元素具有全寬，盡管它的內容是空的，您可以這樣做
.child {
max-width: 400px;
height: 100px;
padding: 16px;
color: white;
background: red;
width: 100%; // setting 100% width with max width will always stretch the element to the max width (if possible)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/359912.html
標籤：javascript html css 弹性盒