在CSS中設置左右側邊欄是一個常見的需求，通常可以通過使用浮動（float）或者定位（position）屬性來實現(xiàn)，以下是一些示例代碼，展示了如何設置左右側邊欄：
示例1：使用浮動（float）
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
float: left;
}
.left-sidebar {
width: 200px;
float: left;
background-color: #f0f0f0;
}
.right-sidebar {
width: 200px;
float: right;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="container">
<div class="left-sidebar">左側欄內容</div>
<div class="right-sidebar">右側欄內容</div>
</div>
</body>
</html>示例2：使用定位（position）
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
}
.left-sidebar {
position: absolute;
left: 0;
top: 0;
width: 200px;
background-color: #f0f0f0;
}
.right-sidebar {
position: absolute;
right: 0;
top: 0;
width: 200px;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="container">
<div class="left-sidebar">左側欄內容</div>
<div class="right-sidebar">右側欄內容</div>
</div>
</body>
</html>示例3：使用Flexbox布局
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.left-sidebar {
width: 200px;
background-color: #f0f0f0;
}
.right-sidebar {
width: 200px;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="container">
<div class="left-sidebar">左側欄內容</div>
<div class="right-sidebar">右側欄內容</div>
</div>
</body>
</html>
版權聲明：除非特別標注，否則均為本站原創(chuàng)文章，轉載時請以鏈接形式注明文章出處。
