当前位置: 首页 > Web前端 > HTML5

CSS布局基础——(三栏布局)

时间:2023-04-05 14:48:14 HTML5

前言你总是听到双翼布局和圣杯布局……不知道是谁起的名字,就叫三栏吧布局。它们虽然有一些细微的差别,但本质上都是实现了三栏布局,即左右两栏固定,中间自适应。随便在网上搜了一下实现方案,所有的实现方案,少则两三种,多则七八种。各种方法各有利弊,但我觉得主要有三四种比较实用的方法,因为很多方法实际上被淘汰了或者太麻烦了(比如tablelayout)。浮动方案绝对定位方案Flex布局方案网格布局(本章未涉及)方案一:浮动方案实现思路:先浮动左右两列,左列向左浮动,右列向右浮动将它们固定在两侧。但是需要注意的是,这种方法是把中间的列放在最后,因为如果中间的列放在中间,本身不浮动的话,会占据文档中的位置,导致右边的列不完全相等一起到左栏。HTML:

head
左栏
右栏
中间栏
SCSS://floatinglayout.layout{color:white;文本对齐:居中;高度:100%;溢出:隐藏;页眉,页脚{宽度:100%;高度:70px;背景:rgb(202,132,2);}页脚{位置:绝对;底部:0;}main{宽度:100%;高度:100%;背景:红色;.left,.right{宽度:300px;高度:100%;背景:RGB(14、214、171);}.left{浮动:左;}.right{浮动:右;}。中心{高度:100%;背景:rgb(26、26、122);效果:缺点:浮动元素会脱离文档流,如果
里面还有其他元素,可能会因为父元素的高度塌陷导致问题,所以要么设置高度为父元素元素,或清除浮动。方案二:绝对定位方案实现思路:左右两列绝对定位,固定在左右两边,中间列通过左右边距距离自适应宽度。同样,这种方法要注意中间列在HTML结构中的位置。如果中间列在中间,那么中间列也应该绝对定位。如果在最后,则不需要绝对定位。HTML:
绝对定位方案
左栏右栏中间栏
底部
SCSS://绝对定位layout.layout{color:white;文本对齐:居中;高度:100%;溢出:隐藏;页眉,页脚{宽度:100%;高度:60px;背景:rgb(202,132,2);}页脚{位置:绝对;底部:0;}main{宽度:100%;高度:100%;背景:红色;300像素;高度:100%;背景:rgba(100,96,87,0.5);}.left{左:0}.right{右:0;//顶部:0;}.center{高度:100%;边距:自动300px;左:0;右:0;背景:蓝色;效果:缺点:绝对定位也会留下documentFlow,如果对其他元素的位置有要求,需要继续设置定位方案3:Flex方案实现思路:灵活布局很简单,将最外层的父元素设置为一个灵活的盒子,然后设置两端的对齐方式,中间列的宽度设置为100%即可。HTML:
flexscheme
leftcolumn中间栏右栏
底部
SCSS://flexlayout.layout{color:white;文本对齐:居中;高度:100%;溢出:隐藏;页眉,页脚{宽度:100%;高度:60px;背景:rgb(202,132,2);文本对齐:居中;}页脚{位置:绝对;底部:0;}main{宽度:100%;高度:100%;背景:红色;显示:弹性;证明内容:空格之间;.left,.right{宽度:300px;高度:100%;背景:rgb(18、157、167);}。中心{宽度:100%;高度:100%;背景:蓝色;}}}效果:缺点:flex仅在CSS3中可用,浏览器兼容性低至IE8