如何在不修改其固有尺寸的情況下垂直對齊可變高度的浮動元素？

如何垂直對齊可變高度的浮動元素

在水平對齊的容器中，浮動預設情況下傾向於與頂部對齊。當處理未知和不同高度的元素時，這種對齊可能會導致不一致和不良的結果。我們的目標是找到一種在不修改其固有大小的情況下垂直居中這些浮動元素的方法。

浮動元素的限制

由於瀏覽器的原因，浮動元素的垂直對齊方式受到限制規格。 CSS 浮動行為規則 #8 規定浮動必須放置得盡可能高。這意味著無法實現浮動的直接垂直對齊。

使用內聯塊包裝器

為了規避此限制，我們可以利用內聯塊元素來包裝我們的浮動元素。內聯塊元素建立區塊格式化上下文（BFC），允許它們包含浮點數。透過賦予這些包裝器垂直對齊屬性，我們可以控制浮動元素的位置。

實作

1. 將每個浮動元素封裝在一個內聯塊中包裝器。
2. 將這些包裝器的顯示屬性設為內聯塊。
3. 為包裝器指定垂直對齊屬性，以垂直對齊它們。
4. 確保外部容器有足夠的高度來容納垂直對齊的浮動元素。

範例

<code class="css">.float-left {
  float: left;
}

.float-right {
  float: right;
}

#main {
  border: 1px solid blue;
  margin: 0 auto;
  width: 500px;
}

#main > div {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}</code>

<code class="html"><div id="main">
  <div>
    <div class="float-left">
      <p>AAA</p>
    </div>
  </div>
  <div>
    <div class="float-right">
      <p>BBB</p>
      <p>BBB</p>
    </div>
  </div>
</div></code>

這種方法有效地垂直居中不同的浮動元素高度而不依賴外部 div 的顯示屬性。但是，請務必注意，內聯塊包裝器之間可能會出現一些空間。

以上是如何在不修改其固有尺寸的情況下垂直對齊可變高度的浮動元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！