成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

三欄布局（一）-------左右寬高固定，中間自適應(yīng)

Aldous / 1080人閱讀

摘要：幼圓常見的頁(yè)面布局有幼圓左右寬度固定，中間自適應(yīng)幼圓上下高度固定，中間自適應(yīng)幼圓左寬度固定，右自適應(yīng)幼圓上高度固定，下自適應(yīng)，幼圓下邊是我看過網(wǎng)上的視頻后寫出來的三欄布局左右寬高固定，中間自適應(yīng)幼圓有種布局方

常見的頁(yè)面布局有

1、左右寬度固定，中間自適應(yīng)；

2、上下高度固定，中間自適應(yīng)；

3、左寬度固定，右自適應(yīng)；

4、上高度固定，下自適應(yīng)，

下邊是我看過網(wǎng)上的視頻后寫出來的三欄布局-左右寬高固定，中間自適應(yīng)；

有5種布局方式：float;? ? position;? ?flex;? ? table;? ?grid;

  1 DOCTYPE html>
  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     
 25     <section class="layout float">
 26         <style type="text/css">
 27             .layout.float .left{
 28                 float: left;
 29                 width: 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>優(yōu)點(diǎn)：兼容性比較好
 47                    缺點(diǎn)：脫離文檔流，清除浮動(dòng)，處理與周邊元素布局
 48                 p>
 49                 <p>去掉高度后,內(nèi)容會(huì)超出容器p>
 50             div>
 51         article>
 52     section>
 53 
 54     
 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>優(yōu)點(diǎn)：快速布局
 81                    缺點(diǎn)：脫離文檔流，可使用性差
 82                 p>
 83                 <p>去掉高度后,內(nèi)容會(huì)超出容器p>
 84             div>
 85             <div class="right">div>
 86         srticle>
 87     section>
 88 
 89     
 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>去掉高度后,容器會(huì)被內(nèi)容撐開，還可以使用p>
118             div>
119             <div class="right">div>
120         article>
121     section>
122 
123     
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                     優(yōu)點(diǎn)：兼容性是最好的
152                     缺點(diǎn)：不好控制、當(dāng)其中一個(gè)高度變，其他的高度也會(huì)變
153                 p>
154                 <p>去掉高度后,容器會(huì)被內(nèi)容撐開，還可以使用p>
155             div>
156             <div class="right">div>
157         article>
158     section>
159 
160     
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                     優(yōu)點(diǎn)：兼容性是最好的
185                     缺點(diǎn)：不好控制、當(dāng)其中一個(gè)高度變，其他的高度也會(huì)變
186                 p>
187                 <p>去掉高度后,內(nèi)容會(huì)超出容器p>
188             div>
189             <div class="right">div>
190         article>
191     section>
192 body>
193 html>

下圖是我的代碼的運(yùn)行結(jié)果：

我在上邊總結(jié)了一下每種布局的優(yōu)缺點(diǎn)，以及去掉高度后哪種布局還可以使用，如果各位有覺得不對(duì)的地方，歡迎大家?guī)臀壹m正！

?

?-ＴＨＥ?。牛危?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1482.html

相關(guān)文章

  • 三欄布局（二）-------上下寬高固定，中間自適應(yīng)

    摘要：上一篇寫的是左右寬高固定，中間自適應(yīng)，根據(jù)上一篇的內(nèi)容，總結(jié)了下上下寬高固定，中間自適應(yīng)的幾種布局方式，有種布局方式話不多說，直接上代碼。上一篇寫的是左右寬高固定，中間自適應(yīng)，根據(jù)上一篇的內(nèi)容，總結(jié)了下上下寬高固定，中間自適應(yīng)的幾種布局方式， 有4種布局方式：? ?position;? ?flex;? ? table;? ?grid; 話不多說，直接上代碼。 DOCTYPE html> ...

    Render 評(píng)論0 收藏0

  • 【CSS】三欄/兩欄寬高自適應(yīng)布局大全

    摘要：方案一方案二和方案的有點(diǎn)是兼容性好因?yàn)槎际潜容^老的解決方案了缺點(diǎn)是之后需要清除浮動(dòng)造成的影響定位的話就是絕對(duì)定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動(dòng)端主流的方案的語法缺點(diǎn)就是以下不支持。 頁(yè)面布局 注意方案多樣性、各自原理、各自優(yōu)缺點(diǎn)、如果不定高呢、兼容性如何 三欄自適應(yīng)布局,左右兩側(cè)300px,中間寬度自適應(yīng) (1) 給出5種方案 方案一: float (左右浮動(dòng),中間...

    jindong 評(píng)論0 收藏0

  • 【CSS】三欄/兩欄寬高自適應(yīng)布局大全

    摘要：方案一方案二和方案的有點(diǎn)是兼容性好因?yàn)槎际潜容^老的解決方案了缺點(diǎn)是之后需要清除浮動(dòng)造成的影響定位的話就是絕對(duì)定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動(dòng)端主流的方案的語法缺點(diǎn)就是以下不支持。 頁(yè)面布局 注意方案多樣性、各自原理、各自優(yōu)缺點(diǎn)、如果不定高呢、兼容性如何 三欄自適應(yīng)布局,左右兩側(cè)300px,中間寬度自適應(yīng) (1) 給出5種方案 方案一: float (左右浮動(dòng),中間...

    isaced 評(píng)論0 收藏0

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對(duì)布局中常見的經(jīng)典問題進(jìn)行簡(jiǎn)單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見的經(jīng)典問題進(jìn)行簡(jiǎn)單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

    Amos 評(píng)論0 收藏0

  • 兩種方式實(shí)現(xiàn)CSS雙飛翼布局

    摘要：雙飛翼布局，就是兩端固定寬高，中間自適應(yīng)的三欄布局先來張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區(qū)域是寬高自適應(yīng)方式一通過彈性布局來實(shí)現(xiàn)看代碼結(jié)構(gòu)，是中間的自適應(yīng)區(qū)域先簡(jiǎn)單粗暴的解決一下瀏覽器的默認(rèn)樣式使用，盒模型好計(jì)算，媽媽再 雙飛翼布局，就是兩端固定寬高，中間自適應(yīng)的三欄布局 先來張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區(qū)域是寬高自適應(yīng) showImg(https:/...

    ghnor 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<