查了一下资料,发现网上写的都不是很清晰,现整理一下思路
何谓双飞翼,就是左右两边的宽度是固定的,而中间的大小可以跟着屏幕的大小的改变而改变
其实实现起来,也很容易,我这里做了一个demo
首先html代码设置一个父盒子,父盒子的样式为box,里面套三个子盒子
最重要的是css代码的实现,实现思路如下,父盒子宽度100%,用相对定位,左右两边的盒子用绝对定位,让其定位到左右两边,中间的盒子宽度设置为100%。最重要的是设置父盒子的样式的padding—left,和左边盒子的宽度一致,比如左边盒子的宽度是100px,那么父盒子的padding—left就设置为100,右边盒子和左边盒子原理一样

网友评论