高度和寬度相等的響應式Square Div
您的目標是建立一個div 元素,自動調整其高度以符合其寬度,無論父元素的大小如何。為了實現這一點,CSS 有一個簡單而有效的解決方案:
使用百分比填充底部:
將以下CSS 添加到您的div:
height: 0; width: 20%; padding-bottom: 20%; background-color: red;
其工作原理如下:
可選巢狀 Div:
為了讓內容放置更靈活,請考慮在方形 div 內建立巢狀 div。這使您可以根據需要居中或對齊內容。
<div>
以上是如何創造等高、等寬的響應式方形div?的詳細內容。更多資訊請關注PHP中文網其他相關文章!