CSS 左右固定兩列是設計中常見的一種布局方式，可以讓網頁更加美觀、實用。通常情況下，我們需要讓兩列中的一列（一般為左側列）固定位置，不隨頁面滾動而發生變化，而另外一列（一般為右側列）則需要自適應屏幕寬度。下面我們就來看看如何實現這種布局方式。 首先，我們需要準備兩個 div 用來分別表示左右兩列： `````` 然后，我們需要設置這兩個 div 的樣式。左側列的樣式應該如下所示： ``` .left-column { position: fixed; top: 0; left: 0; width: 200px; height: 100%; } ``` 上述代碼中，我們將左側列的 position 屬性設置為 fixed，top 屬性設置為 0，left 屬性設置為 0，表示該列固定在頁面的左上角不動，并且寬度為 200px，高度為 100%。注意，這里的 200px 和 100% 可以根據實際需求進行調整。 接下來，我們需要設置右側列的樣式。這里我們需要使用到 flex 布局，讓它自適應屏幕寬度： ``` .right-column { display: flex; justify-content: center; align-items: center; height: 100%; } ``` 上述代碼中，我們通過 display: flex 將右側列設置為 flex 布局，使得它可以自適應屏幕寬度。然后，我們通過 justify-content: center 和 align-items: center 將該列的內容水平和垂直居中。最后，我們將該列的 height 屬性設置為 100%，使得它與左側列高度相等。 完整的代碼如下所示： `````` 通過上面的代碼，我們就可以實現左右固定兩列的效果了。當頁面滾動時，左側列會一直保持在頁面的左上角，不會發生變化，而右側列則會自適應屏幕寬度。這種布局方式可用于實現導航欄等固定的頁面元素。