简单实现栅格布局的两种方式 -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【meiwen.anslib.com - 电脑资料】

    本文给大家介绍的是2种栅格布局的简单实现方式,并附上示例代码,非常实用,这里推荐给大家,有需要的小伙伴参考下吧,

简单实现栅格布局的两种方式

    一、使用float:

代码如下:

   

   

    简单实现栅格布局的两种方式 -电脑资料

   

   

   

A

   

B

   

C

   

D

   

E

   

   

   

    二、使用display:flex(这个css3属性仅谷歌和火狐支持)

代码如下:

   

   

    简单实现栅格布局的两种方式 -电脑资料

   

   

   

A

   

B

   

C

   

D

   

E

   

   

   

    实现效果如图所示:

   

    当然使用table和负边距也是可以实现的,有时间补上:-D

    以上就是本文所述的全部内容了,希望大家能够喜欢,

电脑资料

简单实现栅格布局的两种方式》(http://meiwen.anslib.com)。

最新文章