收藏
    首页
    电话

    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

法律声明：未经许可，任何模仿本站模板、转载本站内容等行为者，本站保留追究其法律责任的权利！ 隐私权政策声明