国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

CSS實(shí)現(xiàn)三列布局

Channe / 2030人閱讀

三列布局指的是兩邊兩列定寬,中間的寬度自適應(yīng)。

常用三種方法:

  • 定位
  • 浮動(dòng)
  • 彈性盒布局

?

定位方式

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

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定位方法創(chuàng)建三列布局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; /* 絕對(duì)定位,使位置固定 */
17         left: 0;
18         top: 0;
19     }
20     .center{
21         height: 600px;
22         background-color: purple;
23         margin: 0 300px 0 200px;   /* 通過(guò)外邊距確定寬度 */
24     }
25     .right{
26         width: 300px;
27         height: 500px;
28         background-color: red;
30         position: absolute; /* 絕對(duì)定位,使位置固定 */
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>

結(jié)果

?

浮動(dòng)方法

讓左右兩邊部分浮動(dòng),脫離文檔流后對(duì)中間部分使用margin來(lái)自適應(yīng)

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮動(dòng)法創(chuàng)建三列布局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設(shè)置為flex,左右兩部分寬度設(shè)置為固定,中間flex設(shè)置為1,左右兩邊的值固定,所以中間的自適應(yīng)

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>彈性盒子創(chuàng)建三列布局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>

?

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/1670.html

相關(guān)文章

  • css中的那些布局

    摘要:張?chǎng)涡窭蠋煹牟┛褪亲筮吜魇讲季郑疫吂潭▽挾茸蟾?dòng)因?yàn)楦?dòng)會(huì)導(dǎo)致元素脫離文檔流,所以下面的元素會(huì)占據(jù)浮動(dòng)元素原來(lái)的位置。代碼左浮動(dòng)實(shí)現(xiàn)兩列布局絕對(duì)定位實(shí)現(xiàn)兩列布局這個(gè)原理類(lèi)似浮動(dòng),因?yàn)榻^對(duì)定位會(huì)脫離文檔流,只需要設(shè)置右的就能實(shí)現(xiàn)布局。 因?yàn)樽罱难獊?lái)潮,就總結(jié)了一下css中的幾種常見(jiàn)的多列布局。 兩列自適應(yīng)布局 兩列自適應(yīng)布局算是css布局里面最基礎(chǔ)的一種布局了,不少網(wǎng)站在使用。 這...

    liangzai_cool 評(píng)論0 收藏0
  • css中的那些布局

    摘要:張?chǎng)涡窭蠋煹牟┛褪亲筮吜魇讲季郑疫吂潭▽挾茸蟾?dòng)因?yàn)楦?dòng)會(huì)導(dǎo)致元素脫離文檔流,所以下面的元素會(huì)占據(jù)浮動(dòng)元素原來(lái)的位置。代碼左浮動(dòng)實(shí)現(xiàn)兩列布局絕對(duì)定位實(shí)現(xiàn)兩列布局這個(gè)原理類(lèi)似浮動(dòng),因?yàn)榻^對(duì)定位會(huì)脫離文檔流,只需要設(shè)置右的就能實(shí)現(xiàn)布局。 因?yàn)樽罱难獊?lái)潮,就總結(jié)了一下css中的幾種常見(jiàn)的多列布局。 兩列自適應(yīng)布局 兩列自適應(yīng)布局算是css布局里面最基礎(chǔ)的一種布局了,不少網(wǎng)站在使用。 這...

    phodal 評(píng)論0 收藏0
  • css常見(jiàn)的各種布局下----三列布局

    css 三列布局,左右固定寬度右邊自適應(yīng)   1不使用定位,只使用浮動(dòng)可以實(shí)現(xiàn)左右固定,中間寬度自適應(yīng)布局      1.1.1 自適應(yīng)部分一定要放第一個(gè)位子,使用浮動(dòng),并且設(shè)置寬度為100%,不設(shè)置浮動(dòng)元素內(nèi)容不夠稱(chēng)不開(kāi)整個(gè)寬度      1.1.2 左右固定部位,使用margin-left :負(fù)數(shù),使其左右靠齊      1.1.3 中間自適應(yīng)部分嵌套一個(gè)div,設(shè)置m...

    番茄西紅柿 評(píng)論0 收藏0
  • css常見(jiàn)的各種布局下----三列布局

    摘要:三列布局,左右固定寬度右邊自適應(yīng)不使用定位,只使用浮動(dòng)可以實(shí)現(xiàn)左右固定,中間寬度自適應(yīng)布局自適應(yīng)部分一定要放第一個(gè)位子,使用浮動(dòng),并且設(shè)置寬度為,不設(shè)置浮動(dòng)元素內(nèi)容不夠稱(chēng)不開(kāi)整個(gè)寬度左右固定部位,使用負(fù)數(shù),使其左右靠齊中間自適應(yīng)部分嵌套一css 三列布局,左右固定寬度右邊自適應(yīng) 1不使用定位,只使用浮動(dòng)可以實(shí)現(xiàn)左右固定,中間寬度自適應(yīng)布局 1.1.1 自適應(yīng)部分一定要放第一個(gè)位子,使...

    tigerZH 評(píng)論0 收藏0
  • css常見(jiàn)的各種布局下----三列布局

    摘要:三列布局,左右固定寬度右邊自適應(yīng)不使用定位,只使用浮動(dòng)可以實(shí)現(xiàn)左右固定,中間寬度自適應(yīng)布局自適應(yīng)部分一定要放第一個(gè)位子,使用浮動(dòng),并且設(shè)置寬度為,不設(shè)置浮動(dòng)元素內(nèi)容不夠稱(chēng)不開(kāi)整個(gè)寬度左右固定部位,使用負(fù)數(shù),使其左右靠齊中間自適應(yīng)部分嵌套一css 三列布局,左右固定寬度右邊自適應(yīng) 1不使用定位,只使用浮動(dòng)可以實(shí)現(xiàn)左右固定,中間寬度自適應(yīng)布局 1.1.1 自適應(yīng)部分一定要放第一個(gè)位子,使...

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

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

0條評(píng)論

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