使父 div 寬度與子級相同

Question

我做了這個似乎有效的布局，唯一的問題是我希望所有 che 填充的 div 都居中。

存在三種可能的“狀態”：

1. 青色元素在所有其他元素的左側

2. 金色和粉色元素位於兩列

3. 所有元素都在一個列上。

我想要的是：

在第一種情況下，一切都居中並且可以工作，而在其他兩種情況下則沒有：元素始終向左對齊。

為了居中，我正在考慮使用margin: 0 auto但似乎 div 比它們的內容大，即使我使用了inline-flex （在運行示例中查看狀態 #3 期間的灰色區域）。 為什么？

我該如何解決？

 .container { outline: 1px solid black; max-width: 490px; margin: 0 auto; } .columns { outline: 1px solid black; display: inline-flex; flex-wrap: wrap; } .map { background-color: cyan; width: 150px; min-width: 150px; height: 150px; min-height: 150px; margin-right: 20px; } .content { outline: 1px solid black; background-color: lightgray; max-width: 320px; } .cards { outline: 1px solid black; display: inline-flex; flex-wrap: wrap; } .card { background-color: pink; outline: 1px solid black; width: 150px; height: 70px; display: inline-block; } .card.left { margin-right: 20px; } .texts { outline: 1px solid black; display: inline-flex; flex-wrap: wrap; } .text { background-color: gold; outline: 1px solid black; width: 150px; height: 200px; display: inline-block; } .text.left { margin-right: 20px; }

 <div class="container"> <div class="columns"> <div class="map"></div> <div class="content"> <div class="cards"> <div class="card left">card #1</div> <div class="card">card #2</div> <div class="card left">card #3</div> <div class="card">card #4</div> </div> <div class="texts"> <div class="text left">text #1</div> <div class="text">text #2</div> </div> </div> </div> </div>

Answer 1

以正確的方式使用媒體查詢，在這里你可以找到這個小提琴鏈接，嘗試調整結果窗口的大小。

 .container { max-width: 490px; margin: 0 auto; } .columns { display: inline-flex; flex-wrap: wrap; } .map { background-color: cyan; width: 150px; min-width: 150px; height: 150px; min-height: 150px; margin-right: 20px; } .content { background-color: lightgray; max-width: 320px; } .cards { display: inline-flex; flex-wrap: wrap; } .card { background-color: pink; width: 150px; height: 70px; display: inline-block; } .card.left { margin-right: 20px; } .texts { display: inline-flex; flex-wrap: wrap; } .text { background-color: gold; width: 150px; height: 200px; display: inline-block; } .text.left { margin-right: 20px; } @media(max-width: 520px){ .container { display: flex; flex-direction: column; align-items: center; } .columns { display: inline-block; } } @media(max-width: 352px){ .container { display: flex; flex-direction: column; align-items: center; } .map {margin-right: 0;} .content { max-width: min-content; } .card.left { margin-right: 0px; } .text.left { margin-right: 0px; } }

 <div class="container"> <div class="columns"> <div class="map"></div> <div class="content"> <div class="cards"> <div class="card left">card #1</div> <div class="card">card #2</div> <div class="card left">card #3</div> <div class="card">card #4</div> </div> <div class="texts"> <div class="text left">text #1</div> <div class="text">text #2</div> </div> </div> </div> </div>