CSS 左右布局可以輕松地將網頁分為兩個列。在 HTML 文件中，必須首先創建一個包含兩個列的 body 元素。
首先，讓我們創建 HTML 文件：
<!DOCTYPE html> <html> <head> <title>左右布局CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="column left"> <h2>左列標題</h2> <p>左列內容</p> </div> <div class="column right"> <h2>右列標題</h2> <p>右列內容</p> </div> </body> </html>
接下來，添加 CSS 代碼到 style.css 文件中：
body {
margin: 0;
padding: 0;
}
.column {
float: left;
width: 45%;
padding: 5%;
box-sizing: border-box;
}
.left {
background-color: #eee;
}
.right {
background-color: #ddd;
}在這個例子中，我們將所有內邊距設置為 5%。利用 box-sizing: border-box 可以避免內邊距增大元素的寬度，從而避免元素溢出。
通過將所有內邊距設置為 5%，我們也為文本留出了足夠的空間，讓它更容易閱讀。
這是一個簡單的CSS左右布局，您可以通過修改CSS屬性來改變其外觀和行為。