左半佈局 - 許多不同的方式

年前，CSS-Tricks探索了創建兩列佈局的各種方法。 這篇更新的文章提供了這些技術的全面概述。

>

>假設您需要一個佈局分為容器中的兩個相等高度的列。 許多CSS方法實現了這一目標，我們將研究幾個。

>

> update（2024年10月25日）：本文現在包含一個使用CSS錨定定位的示例。

背景梯度技術

>一種簡單的視覺方法使用背景梯度。 用一種顏色定義背景的一半，而另一半則具有不同的顏色。 零空間的顏色停止會產生一個尖銳的劃分：

.container {
  background: linear-gradient(to right, #ff9e2c 0%, #ff9e2c 50%, #b6701e 50%, #b6701e 100%);
}

這與單個容器一起使用，但是如果需要填充兩面，則需要浮子或其他佈局方法。

絕對定位方法

>或者，使用父母在父級內使用兩個容器，將它們絕對放置，然後使用百分比將空間劃分。這允許每列獨立內容。 但是，父需要固定的高度，這對於動態內容可能會出現問題。 絕對定位也從文檔流中刪除了元素，可能會影響其他內容。

（假）表接近

>雖然桌子過時用於佈局（並且構成可訪問性問題），但

提供了方便的解決方案。 父容器變成桌子，孩子容器變成單元，均在CSS中處理。 通過在斷點上更改顯示屬性，此方法很容易適應不同的屏幕尺寸。 它享有廣泛的瀏覽器支持，可以追溯到IE8。

使用浮點display: table-cell;

浮子提供了另一種選擇，避免了絕對定位的並發症。 顯式高度設置確保均勻的高度，儘管浮子並不能固有地提供此功能。 背景梯度或其他技術可以產生同等身高的幻想。請記住要清除父母上的漂浮物以保持正確的文檔流程。

>

>內聯塊方法

>

提供了浮子的更乾淨的替代品，避免了清理的需求。 但是，確保列之間的HTML元素之間不存在空間或線路斷裂，以防止不必要的間距。 同樣，對於相等的列高度，需要明確的高度設置。

flexbox解決方案display: inline-block; Flexbox提供了一個優雅的解決方案，儘管支持僅限於IE10及以上。 父容器成為一個flexbox，兒童容器會自動平等共享空間。 在子容器上設置

確保平等分佈。 此方法有效地處理垂直和水平的核心。

網格佈局

對於高級用戶，CSS網格佈局結合了Flexbox的靈活性和表格方法。定義一個容器，然後將其分為可以填充子元素的列和單元格。 >

> CSS錨定位（新！）

> CSS錨定位，一種較新的功能（2024），允許鏈接無關的元素。 定義了一個“錨”元素，並將“目標”元素固定在其上。 這提供了對定位的精確控制：

.container {
  background: linear-gradient(to right, #ff9e2c 0%, #ff9e2c 50%, #b6701e 50%, #b6701e 100%);
}

的豐富性CSS技術突出了其多功能性。

>

以上是左半佈局 - 許多不同的方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！