前端布局之四:等分布局

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

这是前端布局的第四篇文章,讲讲等分布局,即:均等分布排列,如何实现,如下图

原理分析

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

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

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

Float方法

Html代码是这样的:

CSS代码是这样的:

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

Table方法

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

下面就来看看CSS代码:

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

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

Flex方法

Html的代码跟Float是一样的,Html代码:

下面是CSS代码:

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

               

分享本文:

添加评论

昵称*
网站