如何在 HTML/CSS 中建立穩定的兩列佈局以防止跨瀏覽器損壞？-css教學-PHP中文網

如何在HTML/CSS 中實現穩定的兩列佈局

容器屬性

列規格

左列規格

右邊欄位規格

穩定性需求

注意事項

HTML/CSS 解決方案

首頁

web前端

css教學

如何在 HTML/CSS 中建立穩定的兩列佈局以防止跨瀏覽器損壞？

Nov 29, 2024 pm 10:15 PM

How to Create a Stable Two-Column Layout in HTML/CSS That Resists Breakage Across Browsers?

如何在HTML/CSS 中實現穩定的兩列佈局

在HTML/CSS 中建立兩列佈局可能具有挑戰性，尤其是在尋求穩定性時各種瀏覽器。本文提供了一個解決方案，可滿足初始查詢中概述的特定要求。

容器屬性

寬度： 符合父元素的 100%。
高度： 自動調整以適應兩列，消除溢位或捲軸。
最小尺寸： 等於左列寬度的兩倍。

列規格

高度： 可變，依照內容調整高度。
排列： 並排且頂部邊緣對齊。
穩定性： 在套用邊框、填滿、或欄位的邊距。

左列規格

寬度：固定，以像素為單位的絕對值。

右邊欄位規格

寬度： 填滿剩餘空間容器。
寬度計算：容器寬度減去左列寬度。當右列中的 DIV 元素設定 100% 寬度時，它應該會從左列的右邊緣到容器的右邊緣填入該列。

穩定性需求

即使在最小或擴展寬度下，容器也能平滑調整大小，不會破壞佈局。
左列保持固定寬度，防止收縮。
右列不會包裹在左列下方。
沒有捲軸或列溢位。
右列中的元素充分利用其寬度。

注意事項

使用浮動元素防止出現列包裝。
套用溢位：隱藏以確保容器包含。
列上的邊框不應破壞佈局。
列中的內容不應損害佈局穩定性。

HTML/CSS 解決方案

&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Cols&lt;/title&gt;
  &lt;style&gt;
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
    }
    .clear {
      clear: both;
    }
  &lt;/style&gt;
&lt;/head&gt;
 
&lt;body&gt;
  &lt;div&gt;