前言
------两栏布局
- 一、左列定宽，右列自适应
- - 1.浮动+margin
  - 2.浮动+BFC
  - 3.定位
  - 4.flex
  - 5.浮动+负外边距
  - 6.table布局
- 二、左列不定宽，右列自适应
- - 1.flex
  - 2.浮动+BFC
------三栏布局
- 左右两列定宽，中间自适应
- - 1.浮动+margin
  - 2.浮动+BFC
  - 3.flex
  - 4.table
  - 5.定位
  - 6.圣杯布局
  - 7.双飞翼布局
写在后面

前言

在牛客上看面经时，发现有很多关于CSS布局的问题，尤其是两栏、三栏布局。
b站css两栏布局
b站css三栏布局

------两栏布局

一、左列定宽，右列自适应

1.浮动+margin

 <div class="container"><h2 style="text-align:center">利用浮动+margin实现两栏布局</h2><div class="left"></div><div class="right"></div></div>

     * {margin: 0;padding: 0;}.left {height:100%;width:300px;background-color: orange;float: left;}.right {height:100%;background-color: blue;margin-left: 300px;}.container {height:800px;}

效果：

2.浮动+BFC

了解BFC

.left {height:100%;width:300px;background-color: orange;float: left;}.right {height:100%;background-color: blue;/* 触发BFC */overflow: hidden;}.container {height:800px;}

3.定位

.container {position: relative;height:800px;}.left {height:100%;position: absolute;left:0;width:300px;background-color: orange;}/* .right {height:100%;background-color: blue;margin-left: 300px;} */.right {height:100%;position: absolute;background-color: blue;left: 300px;right:0;}

4.flex

.container {display: flex;height:800px;}.left {height:100%;width:300px;background-color: orange;}.right {height:100%;flex:1;background-color: blue;}

5.浮动+负外边距

.container {height:800px;}.left {height:100%;width:300px;float: left;margin-right: -100%;background-color: orange;}.right {height:100%;width: 100%;float: left;/* background-color: red; */}.content{height: 100%;margin-left: 300px;background-color: blue;}

6.table布局

.container {width:100%;display: table;height:800px;}.left {height:100%;width:300px;display: table-cell;background-color: orange;}.right {height:100%;display: table-cell;background-color: blue;}

二、左列不定宽，右列自适应

在左列定宽，右列自适应的情况下，去掉左列的宽度即可。

1.flex

左列的宽度：

width:20%;

2.浮动+BFC

左列的宽度：

width:20%;

------三栏布局

左右两列定宽，中间自适应

1.浮动+margin

<h2 style="text-align:center">利用浮动+margin实现三栏布局</h2><div class="container"><div class="left"></div><div class="right"></div><div class="main"></div></div>

.container{height: 800px;}.left{height: 100%;float: left;width: 200px;background-color: red;}.right{height: 100%;float: right;width: 200px;background-color: blue;}.main{height: 100%;margin-left: 200px;margin-right: 200px;background-color: green;}

效果图：

2.浮动+BFC

触发中间列的BFC

.main{height: 100%;overflow: hidden;background-color: green;}

3.flex

.container{height: 800px;display: flex;}.left{height: 100%;width: 200px;background-color: red;}.right{height: 100%;width: 200px;background-color: blue;}.main{height: 100%;flex: 1;background-color: green;}

4.table

.container{height: 800px;display: table;width: 100%;}.left{height: 100%;display: table-cell;width: 200px;background-color: red;}.right{height: 100%;display: table-cell;width: 200px;background-color: blue;}.main{height: 100%;width: 60%;display: table-cell;background-color: green;}

注意容器的排列顺序：

<div class="left"></div>
<div class="main"></div>
<div class="right"></div>

5.定位

.container{height: 800px;position: relative;}.left{height: 100%;position: absolute;left: 0;width: 200px;background-color: red;}.right{height: 100%;position: absolute;right: 0;width: 200px;background-color: blue;}.main{height: 100%;margin: 0 200px;background-color: green;}

看效果图，这个好像未实现

6.圣杯布局

圣杯布局以class="main"这个div为主：

<div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div>

.container{height: 800px;margin-left: 200px;margin-right: 200px;}.main{width: 100%;height: 100%;float: left;background-color: red;}.left{height: 100%;float: left;width: 200px;margin-left: -100%;position: relative;left: -200px;background-color: blue;}.right{height: 100%;float: left;width: 200px;margin-left: -200px;position: relative;right: -200px;background-color: green;}

7.双飞翼布局

    <div class="content"><div class="main"></div></div><div class="left"></div><div class="right"></div>

.content{height: 600px;float: left;width: 100%;}.main{margin-left: 200px;margin-right: 200px;height: 600px;background-color: red;}.left{height: 600px;float: left;width: 200px;margin-left: -100%;background-color: blue;}.right{height: 600px;float: left;width: 200px;margin-left: -200px;background-color: green;}

看起来也没有实现

写在后面

视频中的例子都没加高度，所以写的时候要自己加高度。
圣杯布局和双飞翼布局好难理解

CSS多栏布局-两栏布局和三栏布局相关推荐

CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
1.效果三栏布局 ,三栏的高度各随内容变化,内容多就长一点,内容少就短一点,但背景色始终填满各栏,左栏宽度始终为200px,右栏宽度始终为250px,中间栏宽度最少为350,可随浏览器窗口的增大而增 ...
html三列布局中间固定,常见的三列布局（左右固定宽度，中间自适应）
实现css中的三列布局,左右固定宽度,中间自适应.三列布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变.比较常见的实现方案是:定位,浮动,css3中新特性flex布局,以及流 ...
CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）
两栏布局(左列定宽, 右列自适应) DOM结构 <div class="box"><div class="box-left"></ ...
用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...
Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
用CSS的float和clear创建三栏液态布局的方法(转载）
三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. ...
css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位左边中间右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
html5 两栏等宽布局代码,分三栏栏宽相等如何将合并的一段分为等宽三栏，栏宽为4.5厘米...
将正文的最后一段分成等宽的三栏,栏间加分隔线.将正文的最后一段分成等宽的三栏,栏间加分隔线. 方法步骤如下: 打开需要操作的WORD文档,选中正文最后一段,点击页面布局中的"更多分栏&quo ...
左中右三栏式布局
一.中间自适应,左右两边宽度固定方法1:box容器 Flex布局,center设置为 flex:1 <!DOCTYPE html> <html lang="en&qu ...
HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局
一.三栏式布局顾名思义,即是将主页分成三部分(左,中,右),给左边和右边的块定宽,中间的块占据余下部分.以下是几种常用的实现方法 1.巧用浮动优点:兼容性好,实现简单缺点:必须先写浮动元素,再写 ...

CSS多栏布局-两栏布局和三栏布局

目录

前言

------两栏布局

一、左列定宽，右列自适应

1.浮动+margin

2.浮动+BFC

3.定位

4.flex

5.浮动+负外边距

6.table布局

二、左列不定宽，右列自适应

1.flex

2.浮动+BFC

------三栏布局

左右两列定宽，中间自适应

1.浮动+margin

2.浮动+BFC

3.flex

4.table

5.定位

6.圣杯布局

7.双飞翼布局

写在后面

CSS多栏布局-两栏布局和三栏布局相关推荐

最新文章

热门文章