实现并列布局的7种方式

当前位置：首页 > CSS

实现并列布局的7种方式

分类:CSS 来源:网络时间:2012-04-11 21:25:50

首先说明要求,实现3个容器并列布局,如下图所示:

这种题在web前端css部分笔试题中经常出现.通过这题能考察出应聘者对css的掌握程度,其考察的面非常广.公司里刚来的前端我也给他出了这样一题,不过我说的至少写出3种实现方式.当时自己想到的有5种实现方式,后来回来一总结才发现可以有7种实现方式满足上述要求,但不限于7种.我目前只能想到这几种.所以特做总结,和大家分享.

1.最常用的方式:float

这是最常用的一种方式,利用float属性向左或右浮动便可实现。

主要html代码：

    
            <DIV id=c1></DIV> 
<DIV id=c2></DIV> 
<DIV id=c3></DIV>

主要css代码：

    
            
            #c1,#c2,#c3{ 
    width:200px; 
    height:400px; 
    background-color:#459898; 
    float:left; 
    margin:20px; 
}

        

2.利用table布局实现
这也算是很早以前较常使用的方式。
主要html代码：

    
            <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代码：

    
            <DIV id=c1></DIV> 
<DIV id=c2></DIV> 
<DIV id=c3></DIV>

主要css代码：

    
            
            #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代码:

    
            
            #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代码:

    
            
            #c1,#c2,#c3{ 
    width:200px; 
    height:400px; 
    background-color:#459898; 
    margin:20px; 
    display:inline-block; 
}

        

6.利用display:table来实现
该方法类似于table布局实现.
主要html代码：

    
            
            <DIV id=container> 
<DIV id=row> 
<DIV id=c1></DIV> 
<DIV id=c2></DIV> 
<DIV id=c3></DIV> 
</DIV> 
</DIV>

        

主要的css代码:

    
            
            #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代码：

    
            <DIV id=container> 
<DIV id=c1></DIV> 
<DIV id=c2></DIV> 
<DIV id=c3></DIV> 
</DIV>

主要的css代码:

    
            
            #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; 
}

        

希望大家能给出更多的实现方案以前分享.博客也很久没更新了,主题最近一段时间也没进展.

来源：http://gulangfish.com/?p=768

加入收藏 | 浏览(7958)

上一篇：select的最佳预设（reset）
下一篇：再谈javascript面向对象编程

iLeichun

实现并列布局的7种方式