css经典的双飞翼布局

作者: weiblock | 来源:发表于2018-12-29 07:53 被阅读74次

查了一下资料,发现网上写的都不是很清晰,现整理一下思路

何谓双飞翼,就是左右两边的宽度是固定的,而中间的大小可以跟着屏幕的大小的改变而改变

其实实现起来,也很容易,我这里做了一个demo

首先html代码设置一个父盒子,父盒子的样式为box,里面套三个子盒子

最重要的是css代码的实现,实现思路如下,父盒子宽度100%,用相对定位,左右两边的盒子用绝对定位,让其定位到左右两边,中间的盒子宽度设置为100%。最重要的是设置父盒子的样式的padding—left,和左边盒子的宽度一致,比如左边盒子的宽度是100px,那么父盒子的padding—left就设置为100,右边盒子和左边盒子原理一样

css经典的双飞翼布局

相关文章

网友评论

    本文标题:css经典的双飞翼布局

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