经典布局（flex和传统两种实现）

1.浮动法

父级宽度：80%

左右：定宽高, 分别浮动向左，浮动向右

中: margin: 0 200px; 定高

注意，中间的块元素必须放在后面

左右定宽，中间自适应

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.wrap{width: 80%;margin: 0 auto;}#left{background: #ccffff;float: left;width: 200px;height: 500px;}#right{background: #ccffff;float: right;width: 200px;height: 500px;}#main{background: #ffcccc;margin:0 200px;height: 500px;}</style>
</head>
<body><div class="wrap"><aside id="left"></aside><aside id="right"></aside><section id="main"></section>
</div></body>
</html>

2.flex法

父级：宽度百分比。定高，flex布局

左右： flex：0 0 200px;

中： flex：1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.wrap{margin: 0 auto;width: 80%;height: 500px;display: flex;}#left{background: #ccffff;flex: 0 0 200px;}#right{background: #ccffff;flex: 0 0 100px;}#main{background: #ffcccc;flex: 1;}</style>
</head>
<body><div class="wrap"><aside id="left"></aside><section id="main"></section><aside id="right"></aside>
</div></body>
</html>

3.双飞翼布局

其实也就是左中右三栏式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.wrap{margin:0 auto;width:80%}#main{width:100%;float: left;background: #ffcccc;}#left{width:200px;float: left;height:500px;background: #ccffff;margin-left: -100%;}#right{width:200px;float: left;height:500px;background: #ccffff;margin-left:-200px;}.content{height:500px;margin:0 200px;}</style>
</head>
<body><div class="wrap"><section id="main"><div class="content">#content</div></section><aside id="left">#left</aside><aside id="right">#right</aside>
</div></body>
</html>

题外话，这也是我遇到的一个面试题，上下定高，中间自适应怎么做

vw和vh是相对于视口（viewport，也可以叫做视区、视界或可视范围）的宽度和高度。1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.wrap{margin: 0 auto;width: 80%;height: 100vh; //重点display: flex;flex-direction: column;}#left{background: #ccffff;flex: 0 0 100px;}#right{background: #ccffff;flex: 0 0 100px;}#main{background: #ffcccc;flex: 1;}</style>
</head>
<body><div class="wrap"><aside id="left"></aside><section id="main"></section><aside id="right"></aside>
</div></body>
</html>

上面虽然实现了需求，但是假如让上下的位置保持不变，怎么弄？

经典布局（flex和传统两种实现）—左中右三栏式相关推荐

左中右三栏式布局
一.中间自适应,左右两边宽度固定方法1:box容器 Flex布局,center设置为 flex:1 <!DOCTYPE html> <html lang="en&qu ...
HCJ2：页面两栏式或三栏式布局
2.1 简介大家在进行页面布局的时候,可能会遇见两栏式布局与三栏式布局,如下图所示: 两栏式例子: 三栏式 2.2 方法 2.2.1 两栏式 .left-pane{width: 14%;heigh ...
python入门——Python的两种编程语言：交互式和文件式
文章目录一.Python的两种编程语言 1. 交互式 2. 文件式以下内容来自于中国慕课网中<零基础学Python语言CAP>课程的学习笔记. 一.Python的两种编程语言 1. 交 ...
【无标题】单例模式的两种创建方式：饿汉式和懒汉式
这里写自定义目录标题单例模式的两种创建方式:饿汉式和懒汉式欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂 ...
三个经典布局：三栏式布局、双飞翼布局、圣杯布局
1.三栏式布局三栏式布局就是左栏定宽左浮动,右栏定宽右浮动. <div class="wrap"><div class="left"> ...
HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局
一.三栏式布局顾名思义,即是将主页分成三部分(左,中,右),给左边和右边的块定宽,中间的块占据余下部分.以下是几种常用的实现方法 1.巧用浮动优点:兼容性好,实现简单缺点:必须先写浮动元素,再写 ...
【三栏式布局、双飞翼布局、圣杯布局】09
三栏式布局文章目录三栏式布局 1. 用calc函数实现三栏式布局 2. 双飞翼布局 3. 圣杯布局两边盒子固定宽度,中间盒子自适应的布局. 1. 用calc函数实现三栏式布局 <div c ...
Java中BorderLayout布局管理器的两种排列实现方式
java中Frame类默认的布局管理器为BorderLayout,其主要是将Frame窗口分为东西南北中五个区域,每个区域仅限于放一个组件,如加入多个,前免得会被覆盖,解决方法为:可以在一个区域中加入 ...
三种方法实现CSS三栏布局
本文由云+社区发表作者:前端林子本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...

经典布局（flex和传统两种实现）—左中右三栏式

1.浮动法

2.flex法

3.双飞翼布局

经典布局（flex和传统两种实现）—左中右三栏式相关推荐

最新文章

热门文章