--------------------------三欄佈局之左右寬度固定，中間自適應--------------------------
阿新 • • 發佈：2018-11-30
常見的頁面佈局有
1、左右寬度固定，中間自適應；
2、上下高度固定，中間自適應；
3、左寬度固定，右自適應；
4、上高度固定，下自適應，
下邊是我看過網上的視訊後寫出來的三欄佈局-左右寬高固定，中間自適應；
1 <!DOCTYPE html><!-- html 5 --> 2 <html> 3 <head> 4 <title>左中右三欄佈局</title> 5 <style type="text/css"> 6 html * { 7 padding: 0; 8 margin: 0; 9 } 10 .layout{ 11 width: 100%; 12 margin-top: 15px; 13 } 14 .layout .three_columns > div{ 15 min-height: 150px; 16 text-align: center; 17 } 18 .layout .three_columns > div.center > p{ 19 margin-top: 15px; 20 } 21 </style> 22 </head> 23 <body> 24 <!-- 第一種三欄佈局：float方式 --> 25 <section class="layout float"> 26 <style type="text/css"> 27 .layout.float .left{ 28 float: left; 29width: 300px; 30 background: #90D9F7; 31 } 32 .layout.float .right{ 33 float: right; 34 width: 300px; 35 background: #F5DE25; 36 } 37 .layout.float .center{ 38 background: pink; 39 } 40 </style> 41 <article class="three_columns"> 42 <div class="left"></div> 43 <div class="right"></div> 44 <div class="center"> 45 <h1>三欄佈局float佈局</h1> 46 <p>優點：相容性比較好 47 缺點：脫離文件流，清除浮動，處理與周邊元素佈局 48 </p> 49 <p>去掉高度後,內容會超出容器</p> 50 </div> 51 </article> 52 </section> 53 54 <!-- 第二種三欄佈局：position方式 --> 55 <section class="layout position"> 56 <style type="text/css"> 57 .layout.position .left{ 58 position: absolute; 59 left: 0; 60 width: 300px; 61 background: #90D9F7; 62 } 63 .layout.position .center{ 64 position: absolute; 65 left: 300px; 66 right: 300px; 67 background: pink; 68 } 69 .layout.position .right{ 70 position: absolute; 71 right: 0; 72 width: 300px; 73 background: #F5DE25; 74 } 75 </style> 76 <srticle class="three_columns"> 77 <div class="left"></div> 78 <div class="center"> 79 <h1>三欄佈局position佈局</h1> 80 <p>優點：快速佈局 81 缺點：脫離文件流，可使用性差 82 </p> 83 <p>去掉高度後,內容會超出容器</p> 84 </div> 85 <div class="right"></div> 86 </srticle> 87 </section> 88 89 <!-- 第三種三欄佈局：flex方式 --> 90 <section class="layout flexbox"> 91 <style type="text/css"> 92 .layout.flexbox{ 93 margin-top: 180px; 94 } 95 .layout.flexbox .three_columns{ 96 display: flex; 97 } 98 .layout.flexbox .left{ 99 width:300px; 100 background: #90D9F7; 101 } 102 .layout.flexbox .center{ 103 flex: 1; 104 background: pink; 105 } 106 .layout.flexbox .right{ 107 width: 300px; 108 background: #F5DE25; 109 } 110 </style> 111 <article class="three_columns"> 112 <div class="left"></div> 113 <div class="center"> 114 <h1>三欄佈局flex佈局</h1> 115 <p>解決上兩種方案的缺陷，最好用的佈局 116 </p> 117 <p>去掉高度後,容器會被內容撐開，還可以使用</p> 118 </div> 119 <div class="right"></div> 120 </article> 121 </section> 122 123 <!-- 第四種三欄佈局：table --> 124 <section class="layout table"> 125 <style type="text/css"> 126 .layout.table .three_columns{ 127 display: table; 128 width: 100%; 129 height: 150px; 130 } 131 .layout.table .three_columns>div{ 132 display: table-cell; 133 } 134 .layout.table .left{ 135 width: 300px; 136 background: #90D9F7; 137 } 138 .layout.table .center{ 139 background: pink; 140 } 141 .layout.table .right{ 142 width: 300px; 143 background: #F5DE25; 144 } 145 </style> 146 <article class="three_columns"> 147 <div class="left"></div> 148 <div class="center"> 149 <h1>三欄佈局table佈局</h1> 150 <p> 151 優點：相容性是最好的 152 缺點：不好控制、當其中一個高度變，其他的高度也會變 153 </p> 154 <p>去掉高度後,容器會被內容撐開，還可以使用</p> 155 </div> 156 <div class="right"></div> 157 </article> 158 </section> 159 160 <!-- 第五種三欄佈局：grid --> 161 <section class="layout grid"> 162 <style type="text/css"> 163 .layout.grid .three_columns{ 164 width: 100%; 165 display: grid; 166 grid-template-rows: 150px; 167 grid-template-columns: 300px auto 300px; 168 } 169 .layout.grid .left{ 170 background: #90D9F7; 171 } 172 .layout.grid .center{ 173 background: pink; 174 } 175 .layout.grid .right{ 176 background: #F5DE25; 177 } 178 </style> 179 <article class="three_columns"> 180 <div class="left"></div> 181 <div class="center"> 182 <h1>三欄佈局grid佈局</h1> 183 <p> 184 優點：相容性是最好的 185 缺點：不好控制、當其中一個高度變，其他的高度也會變 186 </p> 187 <p>去掉高度後,內容會超出容器</p> 188 </div> 189 <div class="right"></div> 190 </article> 191 </section> 192 </body> 193 </html>
下圖是我的程式碼的執行結果：
我在上邊總結了一下每種佈局的優缺點，以及去掉高度後哪種佈局還可以使用，如果各位有覺得不對的地方，歡迎大家幫我糾正！