CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）
2024-04-29 13:25:29
两栏布局（左列定宽, 右列自适应）
DOM结构
<div class="box"><div class="box-left"></div><div class="box-right"></div>
</div>
float + margin
.box {height: 200px;
}.box > div {height: 100%;
}.box-left {width: 200px;background-color: antiquewhite;float: left;
}.box-right {margin-left: 200px;background-color: aquamarine;
}
利用 calc 计算宽度
.box {height: 200px;
}.box > div {height: 100%;
}.box-left {width: 200px;background-color: antiquewhite;float: left;
}.box-right {background-color: aquamarine;width: calc(100% - 200px);float: right;
}
float + overflow
.box {height: 200px;
}.box > div {height: 100%;
}.box-left {width: 200px;float: left;background-color: blue;
}.box-right {overflow: hidden;background-color: red;
}
flex
.box {height: 200px;display: flex;
}.box > div {height: 100%;
}.box-left {width: 200px;background-color: blue;
}.box-right {flex-grow: 1;overflow: hidden;background-color: red;
}
三栏布局
左右加浮动，中间不动
<style>.layout.float .left {float: left;width: 300px;background: red;}.layout.float .right {float: right;width: 300px;background: blue;}.layout.float .center {background: yellow;}
</style>
<section class="layout float"><article class="left-center-right"><div class="left"></div><div class="right"></div><div class="center"><h1>浮动解决方案</h1><p>1.这是布局的中间部分</p><p>2.这是布局的中间部分</p></div></article>
</section>
绝对定位，div 全部浮动，左边距离设为0，中间设 300，最右边那个右边设0
<style>.layout.absolute .left-center-right>div {position: absolute;}.layout.absolute .left {left: 0;width: 300px;background: red;}.layout.absolute .center {left: 300px;right: 300px;background: yellow;}.layout.absolute .right {right: 0;width: 300px;background: blue;}
</style>
<section class="layout absolute"><article class="left-center-right"><div class="left"></div><div class="center"><h1>绝对定位的解决方案</h1><p>1.这是布局的中间部分</p><p>2.这是布局的中间部分</p></div><div class="right"></div></article>
</section>
flexbox布局 父元素设置 flex，左右元素设置宽高，中间设置 flex: 1
<style>.layout.flexbox .left-center-right {display: flex;}.layout.flexbox .left {width: 300px;background: red;}.layout.flexbox .center {flex: 1;background: yellow;}.layout.flexbox .right {width: 300px;background: blue;}
</style>
<section class="layout flexbox"><article class="left-center-right"><div class="left"></div><div class="center"><h1>flexbox的解决方案</h1><p>1.这是布局的中间部分</p><p>2.这是布局的中间部分</p></div><div class="right"></div></article>
</section>
父元素设置表格属性，div 设置 table-cell，子元素左右设置宽高即可
<style>.layout.table .left-center-right {width: 100%;display: table;height: 100px;}.layout.table .left-center-right>div {display: table-cell;}.layout.table .left {width: 300px;background: red;}.layout.table .center {background: yellow;}.layout.table .right {width: 300px;background: blue;}
</style>
<section class="layout table"><article class="left-center-right"><div class="left"></div><div class="center"><h1>表格布局的解决方案</h1><p>1.这是布局的中间部分</p><p>2.这是布局的中间部分</p></div><div class="right"></div></article>
</section>
网格布局，父元素设置 grid
<style>.layout.grid .left-center-right {display: grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;}.layout.grid .left {background: red;}.layout.grid .center {background: yellow;}.layout.grid .right {background: blue;}
</style>
<section class="layout grid"><article class="left-center-right"><div class="left"></div><div class="center"><h1>网格布局的解决方案</h1><p>1.这是布局的中间部分</p><p>2.这是布局的中间部分</p></div><div class="right"></div></article>
</section>
26. 圣杯布局和双飞翼布局
通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。
26.1 圣杯布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;right: 0;}.header,.footer {height: 100px;background-color: aquamarine;}.container {/* 7. container设置padding: 0, rightWidth, 0, leftWidth*/padding: 0 220px 0 200px;/* 2. 给container设置上overflow: hidden，可以形成BFC撑开文档*/overflow: hidden;}.left,.middle,.right {/* 5. 给left、middle、right设置position: relative，不会遮挡middle的内容*/position: relative;/* 1. 首先把left、middle、right都放出来，给它们三个设置上float: left, 脱离文档流*/float: left;min-height: 130px;word-break: break-all;/* 8. 解决单独部分内容扩充的时候，底部会参差不齐。*/padding-bottom: 9999px;margin-bottom: -9999px;}.left {margin-left: -100%;/* 6. left设置 left: -leftWidth*/left: -200px;/* 3. left、right设置上各自的宽度*/width: 200px;}.right {margin-left: -220px;/* 6. right设置 right: -rightWidth*/right: -220px;/* 3. left、right设置上各自的宽度*/width: 220px;}.middle {/* 4. middle设置width: 100%*/width: 100%;}</style>
</head><body><div class="header">header</div><div class="container"><div class="middle"><h4>middle</h4><p>middlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddle</p></div><div class="left"><h4>left</h4><p>leftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleft</p></div><div class="right"><h4>right</h4><p>rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright</p></div></div><div class="footer">footer</div>
</body></html>
双飞翼布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.header,.footer {height: 100px;background-color: aquamarine;}.container {/* 2. 给container设置上overflow: hidden; 可以形成BFC撑开文档*/overflow: hidden;}.left,.middle,.right {/* 1. 首先把left、middle、right都放出来, middle中增加inner，给它们三个设置上float: left, 脱离文档流*/float: left;min-height: 130px;word-break: break-all;/* 7. 解决单独部分内容扩充的时候，底部会参差不齐。*/padding-bottom: 9999px;margin-bottom: -9999px;}.left {/* 5. left设置 margin-left: -100%*/margin-left: -100%;/* 3. left、right设置上各自的宽度*/width: 200px;}.right {/* 6. right设置 right: -rightWidth*/margin-left: -220px;/* 3. left、right设置上各自的宽度*/width: 220px;}.middle {/* 4. middle设置width: 100%*/width: 100%;height: 100%;}.inner {margin: 0 220px 0 200px;min-height: 130px;word-break: break-all;}</style>
</head><body><div class="header">header</div><div class="container"><div class="middle"><div class="inner"><h4>middle</h4><p>middlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddle</p></div></div><div class="left"><h4>left</h4><p>leftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleft</p></div><div class="right"><h4>right</h4><p>rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright</p></div></div><div class="footer">footer</div>
</body></html>
CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）相关推荐
- 用CSS的float和clear创建三栏液态布局的方法(转载）
三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. ...
- 表头样式_1分钟学会制作Word两栏、三栏表头
在做Word表格时,时常需要用到两栏.三栏的表头,一般你是如何操作?今天和大家分享相应的制作技巧. 1.边框法 选中单元格,点击开始--段落--边框--斜下边框即可完成两栏表头的制作. 如何输入表头内 ...
- 【CSS】圣杯、双飞翼布局
[CSS]圣杯.双飞翼布局 文章目录 [CSS]圣杯.双飞翼布局 圣杯布局 基本布局样式 接下来要把主区域移动到中间 把右区域放在主区域的右边 移动左右区域,防止两边挡住中间 完整代码 双飞翼布局 基 ...
- html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
三栏布局 三列自适应布局通常指两边定宽,中间部分宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 基于传统的position进行布局 ...
- div+css经典三行两列布局
写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
- html三栏式布局图,div布局的自由伸展三栏式版面
#middlebox { margin: 0 34% 0 170px; border-left: 2px solid #000; border-right: 2px solid #000; paddi ...
- CSS多栏布局-两栏布局和三栏布局
目录 前言 ------两栏布局 一.左列定宽,右列自适应 1.浮动+margin 2.浮动+BFC 3.定位 4.flex 5.浮动+负外边距 6.table布局 二.左列不定宽,右列自适应 1.f ...
- 用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...
- Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
- 自适应+两栏三栏布局
自适应 宽度自适应 高度自适应 窗口的自适应 动态计算宽度和高度 如何实现两栏或者三栏布局 宽度自适应 概念:不设置宽度的话就是宽度自适应,通常情况下,默认不设置宽度,width的取值为auto 特点 ...
最新文章
- 自动驾驶LiDAR点云深度学习综述
- 5.2 FIR滤波器的卷积（脉冲响应、频率响应，幅频响应,暂态-搞不清楚的有救了啊）
- 《高性能JavaScript》第二章 数据存取
- python判断英文字母_python判断字符串中是否含有英文 | 个人学习笔记记录
- 精度高、模型小、速度快！梯形DenseNets结构实现语义分割新高度！
- 蓝桥杯 ALGO-149 算法训练 5-2求指数
- -bash: findstr: command not found 问题解决
- Django---简单from表单提交
- 小石坝第一次月赛:A
- html文本文档整人代码,一些bat恶搞代码
- [Python可视化] pyecharts安装入门及绘制中国贵州地图
- 连接校园网后登不上图书馆里的SCI等网站问题
- 01 为什么要学习计算机组成原理？
- 这个屡获大奖的Firefox浏览器又推出新版本啦，完全免费
- 仿猫眼电影在线选座组件
- HTTP 、HTTPS
- PC端QQ分享到好友链接
- 共享出行化解城市交通难题（中）
- Java Swing实用小工具开发
- Echarts_1:水平柱体