三栏布局 和圣杯布局(圣杯双飞翼) 简单 易上手理解

三栏布局

简单介绍:  三栏布局 一般 都是左右两栏固定高度,中间栏宽度自适应

实现:思路

使用  float + margin

左元素设置左浮动,右元素设置右浮动

中间元素设置 margin-left 左浮 和 margin-right 右浮

使用  flex

将父元素设置:display:flex

中间元素设置:flex:1

圣杯布局

左中右三个元素分别左浮动

中间元素设置 width:100% 百分百宽

左元素设置 margin-left: -100%, 右元素设置右边距为自身宽度的负值

父元素设置 padding值  内边距 , 为左右两个元素留出空间

设置左右元素为相对定位,左元素的 left 和右元素的right为内边距的宽度的负值

css代码:

双飞翼布局

左中右三个元素分别左浮

中间元素设置width:100% 宽100%

左元素设置 margin-left:-100%,右元素设置右外边距为自身宽度的负值

设置中间元素的子元素的为边距展示中间内容

css代码: