html画布20等分,实现CSS等分布局的4种方式 - 小火柴的蓝色理想

前面的话

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

思路一: float

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

【1】float + padding + background-clip

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

}.parent{margin-right:-20px;overflow:hidden;

}.child{float:left;height:100px;width:25%;padding-right:20px;box-sizing:border-box;background-clip:content-box;

}

style>

1div>

2div>

3div>

4div>

div>

div>

【2】float + margin + calc

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

}.parent{overflow:hidden;margin-right:-20px;

}.child{float:left;height:100px;width:calc(25% - 20px);margin-right:20px;

}

style>

1div>

2div>

3div>

4div>

div>

div>

【3】float + margin + (fix)

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

}.parent{overflow:hidden;margin-right:-20px;

}.child{float:left;width:25%;

}.in{margin-right:20px;height:100px;

}

style>

1div>

div>

2div>

div>

3div>

div>

4div>

div>

div>

div>

思路二: inline-block

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

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

}.parent{font-size:0;margin-right:-20px;overflow:hidden;

}.child{display:inline-block;vertical-align:top;width:25%;padding-right:20px;box-sizing:border-box;background-clip:content-box;font-size:16px;

}

style>

1div>

2div>

3div>

4div>

div>

div>

【2】inline-block + margin + calc

}.parent{margin-right:-20px;font-size:0;

}.child{display:inline-block;vertical-align:top;font-size:16px;height:100px;width:calc(25% - 20px);margin-right:20px;

}

style>

1div>

2div>

3div>

4div>

div>

div>

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

}.parent{margin-right:-20px;font-size:0;

}.child{display:inline-block;vertical-align:top;font-size:16px;width:25%;

}.in{margin-right:20px;height:100px;

}

style>

1div>

div>

2div>

div>

3div>

div>

4div>

div>

div>

div>

思路三: table

缺点：元素被设置为table后，内容撑开宽度。若要兼容IE7-浏览器，需要改为结构。table-cell元素无法设置margin，设置padding及background-clip也不可行

【1】table + margin负值

}.parent{display:table;width:calc(100% + 20px);table-layout:fixed;

}.child{display:table-cell;padding-right:20px;

}.in{height:100px;

}

style>

1div>

div>

2div>

div>

3div>

div>

4div>

div>

div>

div>

【2】table + 兄弟选择器

}.child{display:table-cell;

}.child + .child{padding-left:20px;

}.in{height:100px;

}

style>

1div>

div>

2div>

div>

3div>

div>

4div>

div>

div>

思路四: flex

}.child{flex:1;height:100px;

}.child + .child{margin-left:20px;

}

style>

1div>

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议我要评论

立即提交

专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

php中文网：公益在线php培训，帮助PHP学习者快速成长！

Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1