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

2 列 Div佈局：實現固定寬度的右列和流動的左列

挑戰：

建立兩列佈局，其中右列具有固定寬度，而左列動態調整以適應可用寬度

提供的程式碼：

提供的程式碼嘗試使用浮動和邊距實作佈局，但遇到問題。

解決方案:

要建立固定寬度的右列，同時保持左列的流動性，請遵循以下步驟指南：

1. 刪除左列上的浮動：從左列（#content）中刪除浮動屬性。
2. 重新排序 HTML 欄位： 在 HTML 程式碼中將右邊列 (#right) 放置在左列之前。這可確保先套用右列的寬度。
3. 將溢位應用到外部 Div： 將溢位：隱藏和高度（例如 height：auto）新增至外部 div (div.容器）。這可以防止內部 div 溢出容器。
4. 設定左列寬度和溢位：將左列寬度設為 auto 並新增溢位：隱藏。這允許該列填充剩餘空間並防止與右側列互動。

範例程式碼：

HTML：

CSS：

示範：

訪問[此JsFiddle](https://jsfiddle.net/jackJoe/fxWg7/) 進行工作簡報。

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