美文网首页
html+css实现三列布局的4种方式

html+css实现三列布局的4种方式

作者: Poppy11 | 来源:发表于2020-07-06 22:26 被阅读0次

1、往左浮动,给每个元素宽度设置为33.3%,每个元素往左浮动
2、父元素设置弹性盒子,子元素3个都是flex:1
3、使用绝对定位法:

绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的middle会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。

相关文章

网友评论

      本文标题:html+css实现三列布局的4种方式

      本文链接:https://www.haomeiwen.com/subject/suknqktx.html