当前位置:Gxlcms > html代码 > 实现CSS等分布局的4种方式_html/css_WEB-ITnose

实现CSS等分布局的4种方式_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:150人阅读

× 目录 [1]float [2]inline-block [3]table [4]flex

前面的话

  等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式

思路一: float

  缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的误差

【1】float + padding + background-clip

  使用padding来实现子元素之间的间距,使用background-clip使子元素padding部分不显示背景

1
2
3
4

【2】float + margin + calc

  使用margin实现子元素之间的间距,使用calc()函数计算子元素的宽度

1
2
3
4

【3】float + margin + (fix)

  使用margin实现子元素之间的间距,通过增加结构来实现兼容

1
2
3
4

思路二: inline-block

  缺点:需要设置垂直对齐方式vertical-align,则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性,兼容代码是display:inline;zoom:1;

【1】inline-block + padding + background-clip

1
2
3
4

【2】inline-block + margin + calc

1
2
3
4

【3】inline-block + margin + (fix)

1
2
3
4

思路三: table

  缺点:元素被设置为table后,内容撑开宽度。若要兼容IE7-浏览器,需要改为

结构。table-cell元素无法设置margin,设置padding及background-clip也不可行

【1】table + margin负值

1
2
3
4

【2】table + 兄弟选择器

1
2
3
4

思路四: flex

1
2
3
4

人气教程排行