如何建立具有固定寬度右列和流動左列的 2 列佈局？

2 列Div 佈局：右列固定寬度，左列流動

問題：

您正在尋求一種解決方案來建立具有固定寬度右列的兩列佈局，並且靈活的左欄。儘管探索了各種建議的方法，但沒有一個可以滿足您的特定需求。

答案：

要實現您想要的佈局，需要進行以下修改：

1. 從左列中刪除浮動：從左列中刪除浮動屬性。它的寬度將自動確定。
2. 反轉 HTML 中的列順序： 在 HTML 程式碼中，確保右邊列位於左列之前。這允許固定寬度的右列在流體左列調整之前確定其寬度。
3. 將溢位和高度新增至外部 Div：套用溢位：隱藏屬性和特定高度或外部 div 的自動高度。這可確保它封裝兩個內部 div。
4. 設定左列 CSS： 對於左列，新增 width: auto 和 Overflow: hide。這些屬性使左列獨立於固定寬度的右列。

範例HTML 和CSS：

<div class="container">
  <div class="right">
    Right content fixed width
  </div>
  <div class="left">
    Left content flexible width
  </div>
</div>

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

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

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

透過實現這些調整後，您可以建立所需的兩列佈局，其中具有固定寬度的右列和流動的左列。

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