CSS布局是Web頁面開發的重要部分。當涉及到Web設計時，CSS布局非常重要，因為它決定了頁面的外觀和排版。下面介紹如何使用CSS布局一個截面圖。

/* CSS代碼 */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100vh;
padding: 0 2rem;
}
.content {
width: 60%;
}
.sidebar {
width: 30%;
}
.img-container img {
width: 100%;
height: auto;
object-fit: cover;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.content {
width: 100%;
margin-bottom: 2rem;
}
}

上面的代碼演示了如何使用CSS布局一個截面圖。首先，我們創建一個容器元素，并將其設置為flex布局。我們使用flex-direction屬性將子元素水平排列，并使用justify-content屬性在父元素的兩端分別對齊子元素。我們還使用align-items屬性將子元素垂直居中對齊。

接下來，我們使用類名content創建一個內容區域，并使用類名sidebar創建一個側邊欄。我們將內容區域的寬度設置為60%，將側邊欄的寬度設置為30%。我們還使用類名img-container創建一個圖片容器，其中的圖片將占據整個容器的寬度，并根據需要進行縮放。

最后，我們使用@media查詢來設置響應式布局。當屏幕寬度小于768px時，我們將容器元素的flex-direction屬性設置為垂直排列，并將內容區域的寬度設置為100%。

使用以上的CSS布局代碼，可以輕松地實現一個截面圖的布局。通過使用CSS的布局功能，我們可以創建出各種不同的排版和風格的頁面，為我們的用戶帶來更好的用戶體驗。