前端布局:等分布局

2016/11/01 1158
目录
[隐藏]

这是前端布局的第四篇文章,讲讲等分布局,所谓等分布局的效果图就是下面这样的:

 

然后我们来细细分析下这个等分布局,红绿蓝黄四个单元格等比例,中间有相同的间隔。
等分布局02

也就是说总长度C必须再加G,才能做到均分,就像下面这张图表示的那样。

等分布局03

有三种方法可以实现这种等分布局,分别是Float、Table、Flex,下面我们就来看看具体代码实现。

Float方法

Html代码是这样的:

 

1

 

2

 

3

 

4

 

 

CSS代码是这样的:

这个方法IE8以及以上可以,但是这个布局不够灵活,因为若是要三等分的话,就需要改动width:25%为33.3%,需要手动改。

Table方法

Html的代码是这样的,跟前面Float方法有点不同,需要在parent外再套一层div:

 

 

1

 

2

 

3

 

4

 

 

 

下面就来看看CSS代码:

这里提一下table-layout在这里的作用,首先它的作用是布局优先加速渲染,其次如果设置了table-layout以后,单元格没有设置宽度,那么单元格的宽度就是均分的。

使用table这个方法比float方面更自由,IE8以及以上浏览器支持。

Flex方法

Html的代码跟Float是一样的,那么就直接来看看CSS代码:

其中.column+.column选择器的意思是,一个column后面的column,所以第一个column是不满足的,其他几个是满足的,这就把均分单元格的间隙给设置好了。Flex方法是无比强大的存在,但是目前兼容性不佳,IE11以及以上才支持。

分享本文: