双飞翼HTML圣杯布局,CSS—圣杯布局与双飞翼布局

目录

一、概述

圣杯布局与双飞翼布局针对的都是三栏布局，左右栏固定，中间栏自适应的网页布局。以下介绍三种实现方式，html结构如下所示。

main

left

right

二、详解

相对布局

相对布局中main元素必须是container元素的第一个子元素。

.container {

width: 100%;

min-height: 300px;

padding: 0 60px;

box-sizing: border-box;

}

.container > div {

position: relative;

float: left;

}

.left, .right {

width: 60px;

height: 100%;

}

.left {

left: -60px;

margin-left: -100%;

}

.right {

right: 0;

margin-right: -100%;

}

.main {

width: 100%;

height: 100%;

}

flex布局

.container {

width: 100%;

min-height: 300px;

display: flex;

}

.main {

flex-grow: 1;

}

.left {

order: -1;

flex-basis: 60px;

}

.right {

flex-basis: 60px;

}

绝对布局

.container {

width: 100%;

min-height: 300px;

position: relative;

}

.container > div {

position: absolute;

}

.left, .right {

width: 60px;

height: 100%;

}

.main {

width: calc(100% - 120px);

height: 100%;

left: 60px;

}

.left {

left: 0;

}

.right {

right: 0;

}

空城里的往日时光

发布了206 篇原创文章 · 获赞 82 · 访问量 1万+

私信

关注

标签：right,圣杯,width,100%,布局,60px,height,双飞翼,left

来源： https://blog.csdn.net/weixin_42472040/article/details/103970927