三栏布局
简单介绍: 三栏布局 一般 都是左右两栏固定高度,中间栏宽度自适应
实现:思路
使用 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代码: