如何建立具有固定寬度右列的兩列佈局？-css教學-PHP中文網

如何建立具有固定寬度右列的兩列佈局？

Linda Hamilton

發布： 2024-12-07 15:25:11

原創

697 人瀏覽過

How to Create a Two-Column Layout with a Fixed-Width Right Column?

如何建立具有固定寬度右列的兩列版面配置

在網頁設計中，經常需要建立版面配置有兩列，其中一列具有固定寬度，而另一列是流動的。儘管這是一個常見的要求，但找到一個一致工作的解決方案可能具有挑戰性。

在這種特定情況下，目標是建立兩列，其中右列保持恆定寬度，而左列根據情況擴展或收縮在可用空間上。這是一步一步的答案：

從左列中刪除浮動：刪除左列上的浮動屬性可以使其自然流動。
將右列移到左列之前： 在 HTML 中，右列應位於左列之前一。
設定右列的寬度和浮動：為右列定義固定寬度並對其應用浮動（例如，float: right）。
向外部Div 增加溢位和高度： 對包含內部div 的外部div 應用溢出：隱藏和高度（可以是自動）
向左列新增自動寬度和溢位： 將左列的寬度設定為自動並套用溢位：隱藏。這可確保其獨立於右列。

範例HTML：

<div class="container">
  <div class="right">
    Right Content (Fixed Width)
  </div>
  <div class="left">
    Left Content (Flexible Width)
  </div>
</div>

登入後複製

CSS：

.container {
  height: auto;
  overflow: hidden;
}

.right {
  width: 180px;
  float: right;
  background: #aafed6;
}

.left {
  float: none;
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

登入後複製

CSS：

此解決方案的兩列佈局，其中右列固定寬度，同時允許左列根據瀏覽器視窗大小動態調整。

以上是如何建立具有固定寬度右列的兩列佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！