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

巧妙運用css，讓div元素完美適應內容并自動換行

網頁布局中，常遇到div元素大小需要根據內容自動調整的問題，尤其當div包含多個子div且需文本居中對齊時，難度更高。本文將分享幾種css技巧，助您輕松解決此問題，并分析其優缺點。

直接使用display: inline-block; width: auto; height: auto;雖然能使div大小自適應內容，但相鄰inline-block元素不會自動換行，需要額外添加
標簽或其他換行元素。而display: block雖然解決了換行問題，卻使div寬度撐滿父容器。

如何兼顧div大小自適應和自動換行？關鍵在于width: max-content;。

max-content表示元素內容的內在最小寬度。div寬度將根據內容實際寬度自動調整，不會超出必要范圍。同時，它保留塊級元素特性，自動換行，避免了手動添加換行元素的麻煩。 使用width: max-content;，可簡潔高效地解決div自適應大小和換行問題。