如何在水平對齊的 div 內對齊子 div

Question

如何以最大寬度水平顯示div內的所有元素？

<div style="width:350px">
    <div>a</div>
    <div>b</div>
    <div *ngIf="showC()">c</div>
</div>

如果假設 c 元素不可見，則該空間不應顯示在 div 框中。

我嘗試使用max-width但這沒有幫助。 如果 c div 不可見，則 div 應僅顯示 2 個元素，並且沒有多余的空格，因為 c 不可見

Answer 1

您可以為父級添加display: flex聯其所有子元素並將width:100%添加到所有子級（請參見下面的示例）

 isShown = false; function toggleDiv() { isShown = !isShown if (isShown) { document.querySelector('#showHide').style.display = 'none'; } else { document.querySelector('#showHide').style.display = 'unset'; } }

 .container { display: flex; } .container > div { width: 100%; min-height: 100px; } .container > div:nth-child(1){ background: lightgreen; } .container > div:nth-child(2){ background: yellow; } .container > div:nth-child(3){ background: orange; }

 <div class="container"> <div></div> <div id="showHide"></div> <div></div> </div> <button onclick="toggleDiv()">Toggle Div</button>

當您切換 div（顯示和隱藏）時，其他子項將占用可用寬度