如何使用虛擬元素透過 CSS 建立流體方形佈局？

建立高度等於寬度的流體佈局

在CSS 中，可以動態地將元素的高度設定為其與其相同寬度，創建正方形的縱橫比。為了實現這一點，我們利用了一種稱為「虛擬元素」方法的巧妙技術。

步驟：

1. 使用 display: inline 定義容器 div 元素-區塊和位置：相對。
2. 在容器內建立一個「虛擬」元素，其 margin-top 等於75%。這將建立 4:3 的長寬比。
3. 在容器內放置一個絕對元素(#element)，它將填充容器的高度和寬度

示例：

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}

<div>

結果：

此技術有效地創建了一個流體佈局，其中#element div 的高度根據#container div 的指定寬度動態調整。當您調整容器大小時，元素保持其方形比例。

以上是如何使用虛擬元素透過 CSS 建立流體方形佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！