溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS實現三列布局方法有哪些？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
三列布局指的是兩邊兩列定寬，中間的寬度自適應。
常用三種方法：
定位
浮動
彈性盒布局
定位方式
最直觀和容易理解的一種方法，左右兩欄選擇絕對定位，固定于頁面的兩側，中間的主體選擇用margin確定位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位方法創建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
position: absolute; /* 絕對定位，使位置固定 */
left: 0;
top: 0;
}
.center{
height: 600px;
background-color: purple;
margin: 0 300px 0 200px; /* 通過外邊距確定寬度 */
}
.right{
width: 300px;
height: 500px;
background-color: red;
position: absolute; /* 絕對定位，使位置固定 */
right: 0;
top: 0;
}
</style>
</head>
<body>
<div>Left</div>
<div>Center</div>
<div>Right</div>
</body>
</html>結果
浮動方法
讓左右兩邊部分浮動，脫離文檔流后對中間部分使用margin來自適應
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動法創建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
float: left;
}
.center{
height: 600px;
background-color: purple;
margin: 0 300px 0 200px;
min-width: 100px; /* 最小寬度，防止瀏覽器縮小后中間部分被隱藏 */
}
.right{
width: 300px;
height: 500px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
<div>Center</div> <!-- 左右部分脫離文檔流，中間部分平鋪 -->
</body>
</html>彈性盒布局
使用容器包裹三欄，并將容器的display設置為flex，左右兩部分寬度設置為固定，中間flex設置為1，左右兩邊的值固定，所以中間的自適應
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彈性盒子創建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
}
.center{
height: 600px;
flex: 1;
background-color: purple;
}
.right{
width: 300px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div>
<div>Left</div>
<div>Center</div>
<div>Right</div>
</div>
</body>
</html>感謝各位的閱讀！看完上述內容，你們對CSS實現三列布局方法有哪些大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
