今天我們將要介紹如何使用 CSS 來使元素在寬度變化時自動適應高度，這樣可以避免在網頁布局中出現問題。
首先，為了更好地演示效果，我們將使用一段簡單的 HTML 代碼：
<div class="box"> <p>Hello, World!</p> </div>在這個示例中，我們有一個 `
` 元素，它包含一段文本。我們的目標是讓這個 `
` 元素在寬度變化時，自動適應高度。
要實現這個效果，我們可以使用 CSS 中的 `padding-bottom` 操作符。這個操作符可以讓元素保留一定的底部內邊距，從而使其在寬度變化時，高度自動適應。讓我們為 HTML 代碼添加一些基本的 CSS 樣式：總結一下，通過使用 CSS 中的 `padding-bottom` 操作符，我們可以很容易地使元素在寬度變化時自動適應高度。當然，要確保設置的底部內邊距和元素寬度一致。這對于網頁布局來說是一個很好的解決方案。
.box {
width: 50%;
background-color: #eee;
padding-bottom: 50%;
position: relative;
}
.box p {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}在這個 CSS 代碼中，我們為 `.box` 元素定義了一個底部內邊距 `padding-bottom`，它的值是百分比，這個百分比值應該和 `.box` 的寬度相等，這里設置為 50%。
此外，我們還需要給 `.box` 設置一個相對定位 `position: relative`，這樣 `` 元素就能使用絕對定位，相對于 `.box` 元素來設置它的位置。 接下來，我們為 `
` 元素添加一些基本的 CSS 樣式，包括絕對定位 `position: absolute`、寬度、高度、頂部和左側位置，水平居中文本 `text-align: center`，使用彈性盒子布局讓文本垂直居中。 現在，在頁面中調整 `.box` 元素寬度時，您會發現它的高度也會自動適應：
Hello, World!