配资炒股入配资平台-杠杠账户什么意思-【东方资本】,股票加杠杆会亏到负数吗为什么,今日财经最新消息,股票购买手续费

    電話

    0411-39943997

仟億科技
客服中心
  • 電話
  • 電話咨詢：0411-39943997
  • 手機
  • 手機咨詢:15840979770
    手機咨詢:13889672791
網絡營銷 >更多
您現在的位置：首頁 > 新聞中心 > 常見問題

網頁實現并列布局的7種方式

作者：billionnet 發布于:2012/5/1 17:39:47 點擊量：

 

網頁實現并列布局的7種方式

首先說明要求,實現3個容器并列布局,如下圖所示:

這種題在web前端css部分筆試題中經常出現.通過這題能考察出應聘者對css的掌握程度,其考察的面非常廣.公司里剛來的前端我也給他出了這樣一題,不過我說的至少寫出3種實現方式.當時自己想到的有5種實現方式,后來回來一總結才發現可以有7種實現方式滿足上述要求,但不限于7種.我目前只能想到這幾種.所以特做總結,和大家分享.

1.最常用的方式:float

這是最常用的一種方式,利用float屬性向左或右浮動便可實現。

主要html代碼：

1
2
3
<DIV id=c1>DIV>
<DIV id=c2>DIV>
<DIV id=c3>DIV>

主要css代碼：

1
2
3
4
5
6
7
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
    float:left;
    margin:20px;
}

2.利用table布局實現
這也算是很早以前較常使用的方式。
主要html代碼：

1
<TABLE><TBODY><TR><TD><DIV id=c1>DIV>TD><TD><DIV id=c2>DIV>TD><TD><DIV id=c3>DIV>TD>TR>TBODY>TABLE>

3.使用position:absolute絕對定位實現
主要html代碼：

1
2
3
<DIV id=c1>DIV>
<DIV id=c2>DIV>
<DIV id=c3>DIV>

主要css代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
    position:absolute;
}
#c1{
    top:20px;
    left:20px;
}
#c2{
    top:20px;
    left:260px;
}
#c3{
    top:20px;
    left:500px;
}

4.利用position:relative相對定位實現
主要的css代碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
    position:relative;
}
#c2{
    top:-400px;
    left:240px;
}
#c3{
    top:-800px;
    left:480px;
}

5.利用display:inline-block實現
對于這種方式,有高手推薦完全用這個屬性來取代float.大家自行斟酌吧。
主要的css代碼:

1
2
3
4
5
6
7
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
    margin:20px;
    display:inline-block;
}

6.利用display:table來實現
該方法類似于table布局實現.
主要html代碼：

1
2
3
4
5
6
7
<DIV id=container>
<DIV id=row>
<DIV id=c1>DIV>
<DIV id=c2>DIV>
<DIV id=c3>DIV>
DIV>
DIV>

主要的css代碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
#container{
    display:table;
}
#row{
    display:table-row;
}
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
    border-right:40px solid #fff;
    display:table-cell;
}

7.利用css3新屬性column實現
這種方法可能是大家最陌生的一種,ie8及以下瀏覽器都不支持。
主要html代碼：

1
2
3
4
5
<DIV id=container>
<DIV id=c1>DIV>
<DIV id=c2>DIV>
<DIV id=c3>DIV>
DIV>

主要的css代碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#container{
    width:700px;
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        -webkit-column-width: 200px;
 
        -moz-column-count: 3;
        -moz-column-gap: 20px;
        -moz-column-width: 200px;
 
        column-count: 3;
        column-gap: 20px;
        column-width: 200px;
}
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
}

希望大家能給出更多的實現方案以前分享.博客也很久沒更新了,主題最近一段時間也沒進展.



分享到：

Copyright@ 2011-2016 版權所有：大連千億科技有限公司 遼ICP備11013762-3號   google網站地圖   百度網站地圖   網站地圖

公司地址：大連市沙河口區中山路692號辰熙星海國際2317 客服電話：0411-39943997 QQ：2088827823 37482752

法律聲明：未經許可，任何模仿本站模板、轉載本站內容等行為者，本站保留追究其法律責任的權利！ 隱私權政策聲明