CSS實現三列布局

Channe 發布于2019-04-23 13:17 / 2037人閱讀

三列布局指的是兩邊兩列定寬，中間的寬度自適應。

常用三種方法：

定位
浮動
彈性盒布局

定位方式

最直觀和容易理解的一種方法，左右兩欄選擇絕對定位，固定于頁面的兩側，中間的主體選擇用margin確定位置

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定位方法創建三列布局title>
 6     <style>
 7     *{
 8         margin: 0;
 9         padding: 0;
10     }
11     .left{
12         width: 200px;
13         height: 500px;
14         background-color: yellow;
16         position: absolute; /* 絕對定位，使位置固定 */
17         left: 0;
18         top: 0;
19     }
20     .center{
21         height: 600px;
22         background-color: purple;
23         margin: 0 300px 0 200px;   /* 通過外邊距確定寬度 */
24     }
25     .right{
26         width: 300px;
27         height: 500px;
28         background-color: red;
30         position: absolute; /* 絕對定位，使位置固定 */
31         right: 0;
32         top: 0;
33     }
34 
35     style>
36 head>
37 <body>
38     <div class="left">Leftdiv>
39     <div class="center">Centerdiv>
40     <div class="right">Rightdiv>
41 body>
42 html>

結果

浮動方法

讓左右兩邊部分浮動，脫離文檔流后對中間部分使用margin來自適應

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮動法創建三列布局title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .left{
12         width: 200px;
13         height: 500px;
14         background-color: yellow;
15         float: left;
16     }
17     .center{
18         height: 600px;
19         background-color: purple;
20         margin: 0 300px 0 200px;
21         min-width: 100px;  /* 最小寬度，防止瀏覽器縮小后中間部分被隱藏 */
22     }
23     .right{
24         width: 300px;
25         height: 500px;
26         background-color: red;
27         float: right;
28     }
29     style>
30 head>
31 <body>
32     <div class="left">Leftdiv>
33     <div class="right">Rightdiv>
34     <div class="center">Centerdiv>  
35 body>
36 html>

彈性盒布局

使用容器包裹三欄，并將容器的display設置為flex，左右兩部分寬度設置為固定，中間flex設置為1，左右兩邊的值固定，所以中間的自適應

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>彈性盒子創建三列布局title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .container{
12             display: flex;
13         }
14         .left{
15         width: 200px;
16         height: 500px;
17         background-color: yellow;
18     }
19     .center{
20         height: 600px;
21         flex: 1;
22         background-color: purple;
23     }
24     .right{
25         width: 300px;
26         height: 500px;
27         background-color: red;
28     }
29     style>
30 head>
31 <body>
32     <div class="container">
33         <div class="left">Leftdiv>
34         <div class="center">Centerdiv>  
35         <div class="right">Rightdiv>
36     div>
37 body>
38 html>

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1670.html

css中的那些布局

摘要：張鑫旭老師的博客是左邊流式布局，右邊固定寬度左浮動因為浮動會導致元素脫離文檔流，所以下面的元素會占據浮動元素原來的位置。代碼左浮動實現兩列布局絕對定位實現兩列布局這個原理類似浮動，因為絕對定位會脫離文檔流，只需要設置右的就能實現布局。因為最近心血來潮，就總結了一下css中的幾種常見的多列布局。兩列自適應布局兩列自適應布局算是css布局里面最基礎的一種布局了，不少網站在使用。這...

liangzai_cool 2019-08-29 11:00 評論0 收藏0
css中的那些布局

摘要：張鑫旭老師的博客是左邊流式布局，右邊固定寬度左浮動因為浮動會導致元素脫離文檔流，所以下面的元素會占據浮動元素原來的位置。代碼左浮動實現兩列布局絕對定位實現兩列布局這個原理類似浮動，因為絕對定位會脫離文檔流，只需要設置右的就能實現布局。因為最近心血來潮，就總結了一下css中的幾種常見的多列布局。兩列自適應布局兩列自適應布局算是css布局里面最基礎的一種布局了，不少網站在使用。這...

phodal 2019-08-01 15:30 評論0 收藏0
css常見的各種布局下----三列布局

css 三列布局，左右固定寬度右邊自適應　　1不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局　　　　　1.1.1 自適應部分一定要放第一個位子，使用浮動，并且設置寬度為100%，不設置浮動元素內容不夠稱不開整個寬度　　　　　1.1.2 左右固定部位，使用margin-left :負數，使其左右靠齊　　　　　1.1.3 中間自適應部分嵌套一個div，設置m...

番茄西紅柿 2019-04-23 10:21 評論0 收藏0
css常見的各種布局下----三列布局

摘要：三列布局，左右固定寬度右邊自適應不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局自適應部分一定要放第一個位子，使用浮動，并且設置寬度為，不設置浮動元素內容不夠稱不開整個寬度左右固定部位，使用負數，使其左右靠齊中間自適應部分嵌套一css 三列布局，左右固定寬度右邊自適應 1不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局 1.1.1 自適應部分一定要放第一個位子，使...

tigerZH 2019-04-22 17:02 評論0 收藏0
css常見的各種布局下----三列布局

摘要：三列布局，左右固定寬度右邊自適應不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局自適應部分一定要放第一個位子，使用浮動，并且設置寬度為，不設置浮動元素內容不夠稱不開整個寬度左右固定部位，使用負數，使其左右靠齊中間自適應部分嵌套一css 三列布局，左右固定寬度右邊自適應 1不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局 1.1.1 自適應部分一定要放第一個位子，使...

mingde 2019-04-22 16:34 評論0 收藏0