流體布局

主要內容無法優先加載，影響用戶體驗

html結構，left,right，center，主要內容無法優先加載

<div class="container1"><div class="col_left">left</div> <div class="col_right">right</div><div class="col_center">center</div></div>

css

/* 左右浮動，中間加 margin */.col_left {width: 100px;background: rgb(7, 78, 119);float: left;}.col_right {width: 100px;background: rgb(39, 20, 20);float: right;}.col_center {height: 300px;background: green;margin: 0 100px; /* ********大小等于側邊 width */}

BFC3欄布局

主要內容無法優先加載，影響用戶體驗

<div class="container1"><div class="col_left">left</div><div class="col_right">right</div><div class="col_center">center</div></div>

css

.col_left {width: 100px;height: 100px;background: red;float: left; /* 左浮動*/}.col_right {width: 100px;height: 100px;background: green;float: right; /*右浮動*/}.col_center {height: 200px;background: blue;overflow: hidden; /*塊級格式化上下文 BFC */}

雙飛翼布局

利用的是浮動元素 margin 負值的應用。主體內容可以優先加載，
HTML 代碼結構稍微復雜點。

<div class="content"><div class="main"></div></div><div class="left"></div><div class="right"></div>

css

.content {float: left;width: 100%; /*設置寬度，使得剩下元素下移*/}.main {height: 200px;margin-left: 110px;margin-right: 220px;background-color: green;}.left {float: left;height: 200px;width: 100px;margin-left: -100%;background-color: red;}.right {width: 200px;height: 200px;float: left;margin-left: -200px;background-color: blue;}

圣杯布局

<div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div>

css

.container {margin-left: 120px; /*設置盒子大小*/margin-right: 220px;/*設置盒子大小*/}.main {float: left;width: 100%; /*設置盒子大小*/height: 300px;background-color: red;}.left {float: left;width: 100px;height: 300px;margin-left: -100%;position: relative; /*相對定位*/left: -120px; /**/background-color: blue;}.right {float: left;width: 200px;height: 300px;margin-left: -200px;position: relative; /**/right: -220px; /**/background-color: green;}

Flex 布局

<div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div>

css

.container {display: flex;}.main {flex-grow: 1;height: 300px;background-color: red;}.left {order: -1; /**/flex: 0 1 200px;margin-right: 20px;height: 300px;background-color: blue;}.right {flex: 0 1 100px;margin-left: 20px;height: 300px;background-color: green;}

絕對定位

<div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div> .container {position: relative;}.main {height: 400px;margin: 0 120px;background-color: green;}.left {position: absolute;width: 100px;height: 300px;left: 0;top: 0;background-color: red;}.right {position: absolute;width: 100px;height: 300px;background-color: blue;right: 0;top: 0;}

原文：詳解 CSS 七種三欄布局技巧

轉載于:https://www.cnblogs.com/rosendolu/p/10602142.html

總結

以上是生活随笔為你收集整理的3栏布局技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。