- 三栏自适应 双飞翼布局
- 左中右(left、middle、right)三列布局,渲染顺序中间列书写在前保证提前渲染,左右两列定宽,中间列自适应剩余宽度
- middle是自适应宽度的,所以100%;
- middle、left、right都是float:left;,但是main的宽度是100%,所以left、right被挤到第二行;
- 让left移动到左边就容易了,需要向左边移动一个middle的宽度就可以了,所以就是margin-left:-100%;
- middle的宽度是100%,要让right移动到右边,则只需要给right一个自身的宽度,让它移动上去就行了,所以就是margin-left:-npx
- left和right实际上是叠在middle的左右两边的,在写结构时,要在middle里面多写一层content,只要给content一个margin-left:left宽&margin-rightt:right宽;里面的内容就不会被left和right挡住;
CSS入门06
最新推荐文章于 2024-08-14 09:51:48 发布