如何讓div自動適應內容大小并保持換行？

讓div容器自動適應內容大小并保持換行，是網頁布局中常見的問題。 特別是當div內包含多個子元素且需要文本居中對齊時，這個問題更顯棘手。 本文提供一種簡單有效的解決方案，讓div寬度隨內容自適應，同時確保正常換行。

以往的解決方法，例如使用display: inline-block; width: auto; height: auto;雖然能使div大小隨內容變化，但會造成相鄰div不換行，需要額外添加
或其他換行元素。而使用display: block;雖然解決了換行問題，卻導致div寬度撐滿父容器，影響頁面整體布局。

最佳方案：使用width: max-content;

width: max-content; 屬性是解決此問題的關鍵。它允許元素寬度根據其內容的自然寬度自動調整，同時保留塊級元素的換行特性。 這與width: auto; 不同，后者在某些情況下可能無法正確處理換行。

只需在css中添加：

div {   width: max-content; }

這樣設置后，div的寬度將根據內容動態調整，并保持正常的換行行為，無需任何額外操作。 這是一個簡潔、高效且副作用最小的解決方案，完美解決了div內容自適應和換行的問題。