ccs之经典布局（二）（两栏，三栏布局）
接上篇ccs之经典布局（一）（水平垂直居中）
四、两列布局
单列宽度固定，另一列宽度是自适应。
1、float+overflow:auto;
固定端用float进行浮动，自适应的用overflow:auto;触发BFC.
2、absolute+margin-left
父容器相对定位，固定端于父容器绝对定位，自适应margin-left设置为固定端width
3、table布局
父容器display:table，内容撑开宽度，所以需要设置width:100%;两端都以display:table-cell
4、css计算属性
固定端float,自适应端的宽度为calc(100%-固定端的宽度)。
5、flex布局
父容器flex布局，固定端固定with,自适应端flex:1实现自适应
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>两列布局</title>
<style>
* {
margin: 0;
margin: 0;
} .left,
.right {
height: 500px;
}
.parent{
/* position: relative; 第2种方法*/ /* display: table; 第3种方法
width: 100%;
table-layout: fixed; */
/* display: flex;; 第5种方法 */ } .left {
width: 300px;
background: greenyellow;
/* float: left; 第1种方法 */
/* position: absolute; 第2种方法 */
/* display: table-cell; 第3种方法 */
/* float: left; 第4种方法 */
} .right {
background: orange;
/* overflow: auto; 第1种方法*/
/* margin-left: 300px; 第2种方法 */
/* display:table-cell; 第3种方法 */
/* width: calc(100%-300px); 第4种方法 */
/* flex: 1; 第5种方法 */ } .inner {
background: pink;
height: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right">
<div class="inner">inner</div>
</div>
</div>
</body>
</html>
五、三列布局
三列布局一般情况下指的是左右两边固定，中间自适应的布局方式。
1、float+margin
左右两边是固定端，进行浮动，中间端使用margin来自适应。需要注意一点：使用浮动时，中间列对应的DOM元素在html应该放在最后。
2、中间相对定位，左右绝对定位
左右设置position:absolute，中间position:relative,还需注意的一点是要设置左右两边的top和left.
3、使用table布局
这种布局的时候要注意的是DOM元素的顺序问题,用的少。
4、flex布局，这种就是兼容性的问题。
5、grid布局，这种就是兼容性的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
*{
margin:0;
padding:0;
}
.container{
/* display: table; 第3种方法
width: 100%; */ /* display: flex; 第4种方法 */
/* display: grid;
grid-template-columns: 200px auto 300px; 第5种方法 */ } .right,.left{
width: 200px;
height: 500px; /* position: absolute; 第2种方法 */
/* display: table-cell; 第3种方法 */ }
.left{
background: chocolate;
/* float: left; 第1种方法 */ /* top:0; 第2种方法
left: 0; */
}
.center{
height: 500px;
background: yellow;
min-width: 100px;
/* margin:0 300px 0 200px; 第1种方法 */ /* position:relative; 第2种方法
margin: 0 300px 0 200px; */ /* display: table-cell; 第3种方法 */ /* flex:1; 第4种方法 */ }
.right{
width: 300px;
background: yellowgreen;
/* float: right; 第1种方法 */ /* top: 0; 第2种方法
right: 0; */
} </style>
</head>
<body>
<div class="container">
<div class="left">左端</div>
<div class="center">中间</div> <!--记得第3种方法的时候dom元素的顺序要注意 -->
<div class="right">右边</div>
</div> </body>
</html>
从三列布局中我们可以看到圣杯布局和双飞翼布局，下面对这两种布局做出解释和代码实现。
1、双飞翼布局
要求：header,footer各自占领屏幕所有的宽度，高度自定。
中间的container是一个三栏布局。三栏布局两侧宽度固定不变，中间部分的自动填充整个区域。
代码实现：
a.left,cneter,right 三者都设置左浮动； 设置center的宽度为100%； left设置margin-left:-100%,right设置margin-left:自身的宽度；设置center的main值为左右两个侧栏的距离，margin:0 right宽度 0 left宽度；
2、圣杯布局
要求：header,footer各自占领屏幕所有的宽度，高度自定。
中间的container是一个三栏布局。三栏布局两侧宽度固定不变，中间部分的自动填充整个区域。
代码实现：
3、二者的相同点和不同点
相同：要实现的效果是一样的。两边宽度固定，中间自适应，且中间栏要放在文档前面提前渲染。在问题的解决中三栏都是要浮动的，左右两栏加上负margin让其跟中间栏并排，以形成三栏布局。
不同点：解决中间栏div内容不被挡的思路不一样。
双飞翼布局：为了中间的div不被挡，直接在中间div内部创建了一个子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏留出位置，改变了DOM结构。
圣杯布局：为了中间的div不被挡，将中间div设置了左右padding后，将左右两个div用相对布局position：relative配合right和left属性来使用。不改变DOM结构，但代码量多。
4、圣杯布局和双飞翼布局的另外实现方法
flex/grid
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
} body {
font-size: 20px;
font-weight: bold;
min-width: 550px;
}
.column{
text-align: center;
height: 500px;
line-height: 500px;
}
.header,
.footer {
height: 50px;
line-height: 50px;
text-align: center;
background: rgb(168, 167, 164);
}
.container{
overflow: hidden;
}
.left{
width: 200px;
background: palevioletred;
float: left;
margin-left: -100%;
}
.right{
width: 190px;
background: palevioletred;
float: left;
margin-left: -190px;
}
.center{
width: 100%;
float: left;
background: rgb(140, 240, 93);
}
.main{
margin: 0 190px 0 200px;
}
</style>
</head> <body>
<div class="header">header</div> <div class="container">
<div class="center column">
<div class="main">center</div>
</div> <div class="left column">left</div> <div class="right column">right</div>
</div> <div class="footer">footer</div>
</body> </html>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
} body {
font-size: 20px;
font-weight: bold;
} .header,
.footer {
height: 50px;
line-height: 50px;
text-align: center;
background: grey;
} .column {
text-align: center;
height: 500px;
line-height: 500px;
}
.container{
/* 这是为了放好中间center的位置 */
padding: 0 190px 0 200px;
}
.center{
width: 100%;
background: greenyellow;
float: left;
}
.left{
width: 200px;
background: palevioletred;
float: left;
margin-left: -100%; position: relative;/* 中间栏位置放好后，左栏的位置也相应的右移，通过相对定位的left恢复到正确的位置 */
left: -200px;
}
.right{
width: 190px;
background: palevioletred;
float: right;
margin-left:-190px;
position: relative;/* 中间栏位置放好后，右栏的位置也相应的左移，通过相对定位的right恢复到正确的位置 */
right: -190px;
} .footer{
clear: both;
} </style>
</head> <body>
<div class="header">header</div> <div class="container">
<div class="center column">
<div class="main">center</div>
</div> <div class="left column">left</div> <div class="right column">right</div>
</div> <div class="footer">footer</div>
</body> </html>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>双飞翼布局之flex</title>
<style>
* {
margin: 0;
padding: 0;
} body {
font-size: 20px;
font-weight: bold;
min-width: 550px;
} .column {
text-align: center;
height: 500px;
line-height: 500px;
} .header,
.footer {
height: 50px;
line-height: 50px;
text-align: center;
background: rgb(168, 167, 164);
}
.container{
display: flex;
}
.center{
background: rgb(140, 240, 93);
flex:1;
order:2
}
.left{
background: palevioletred;
width: 200px;
order:1
}
.right{
background:palevioletred;
width: 190px;
order:3;
}
</style>
</head> <body>
<div class="header">header</div> <div class="container">
<div class="center column">
<div class="main">center</div>
</div> <div class="left column">left</div> <div class="right column">right</div>
</div> <div class="footer">footer</div>
</body> </html>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>双飞翼布局之grid</title>
<style>
* {
margin: 0;
padding: 0;
} body {
font-size: 20px;
font-weight: bold;
min-width: 550px;
} .column {
text-align: center;
height: 500px;
line-height: 500px;
} .header,
.footer {
height: 50px;
line-height: 50px;
text-align: center;
background: rgb(168, 167, 164);
}
.container{
display: grid;
grid-template-columns:200px auto 190px;
grid-template-rows: auto;
}
.left{
grid-column: 1/2;
/* grid-row: 1/2; */
background: palevioletred;
}
.center{
grid-column: 2/3;
grid-row: 1/2;
background: greenyellow;
}
.right{
grid-column: 3/4;
grid-row: 1/2;
background: palevioletred;
}
</style>
</head> <body>
<div class="header">header</div> <div class="container">
<div class="center column">
<div class="main">center</div>
</div> <div class="left column">left</div> <div class="right column">right</div>
</div> <div class="footer">footer</div>
</body> </html>
六、css3之多列布局
css多列可以更加容易的定义多列文本，像报纸那样。
属性如下：
1、column-count 规定元素应该被分隔的列数
适用于：除了table外的非替换块级元素，table cells,inline-block元素
auto：根据浏览器来计算，integer：取值大于0
2、column-gap 规定列与列之间的间隔大小
3、column-rule 设置或者检索对象列与列之间的边框，复合属性
color-rule-color/color-rule-style/color-rule-width
4、column-fill 设置或检索对象所有列的高度是否统一
auto 列高度自适应内容
balance 所有列的高度以其中最高的一列统一
5、column-span 设置或检索对象元素是否跨所有的列
none不跨列，all 跨所有列
6、column-width 设置或检索对象每列的宽度
7、columns 设置或检索对象的列数和每列的宽度，是一个复合属性
<'column-width'>||<'column-count'>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
column-count:4;
column-gap:30px;
column-rule:2px solid green;
column-span: all;
columns: 50px 3;
}
</style>
</head>
<body>
<h2>测试标题测试标题测试标题测试标题</h2>
<div>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>
多列用于瀑布流上可以做出很漂亮的效果
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-size:500px 500px;
background:url(../MYPROJECT/imges/a.png),url(../MYPROJECT/imges/bg.gif);
background-color: hsl(0, 20%, 17%);
}
#items{
width: 90%;
margin: 10px 5%;
column-count: 5;
column-gap: 20px;
column-fill:auto;
}
img{
display: block;
width:100%;
}
#items div{
border:2px solid pink;
margin-bottom: 10px;
padding:5px;
break-inside: avoid; }
p{
font-size: 18px;
color:#a77869;
text-align: center;
font-weight: bold;
padding:10px 0;
}
</style>
</head> <body>
<div id="items">
<div>
<img src="../MyProject/imges/1.jpg">
<p>
小动物那是极其可爱的呢
</p>
</div>
<div>
<img src="../MyProject/imges/2.jpg">
<p>
小动物那是极其可爱的呢
</p>
</div>
<div>
<img src="../MyProject/imges/3.jpg">
<p>
小动物那是极其可爱的呢
</p>
</div>
<div>
<img src="../MyProject/imges/4.jpg">
<p>
小动物那是极其可爱的呢
</p>
</div>
<div>
<img src="../MyProject/imges/5.jpg">
<p>
小动物那是极其可爱的呢
</p>
</div>
<div>
<img src="../MyProject/imges/6.jpg">
<p>
小动物那是极其可爱的呢
</p>
</div>
<div>
<img src="../MyProject/imges/7.jpg">
<p>
小动物那是极其可爱的呢
</p>
</div>
<div>
<img src="../MyProject/imges/8.jpg">
<p>
小动物那是极其可爱的呢
</p>
</div>
<div>
<img src="../MyProject/imges/9.jpg">
<p>
小动物那是极其可爱的呢
</p>
</div>
<div>
<img src="../MyProject/imges/10.jpg">
<p>
小动物那是极其可爱的呢
</p>
</div>
</div>
</body> </html>
ccs之经典布局（二）（两栏，三栏布局）的更多相关文章
- web标准(复习)--3 二列和三列布局
今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...
- css实现常用的两栏三栏布局
1.两栏 <div class="wrapper"> <div class="half left">left box <p> ...
- 【css】css2实现两列三列布局的方法
前言 对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要 ...
- [CSS布局]简单的CSS三列布局
前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...
- Web标准：三、二列和三列布局
知识点: 1.二列自适应宽度 2.二列固定宽度 3.二列固定宽度居中 4.xhtml的块级元素(div)和内联元素(span) 5.float属性 6.三列自适应宽度 7.三列固定宽度 8.三列固定宽 ...
- 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- CSS布局——三栏布局
说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...
- css中常用的七种三栏布局技巧总结
三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?例如当当网首页边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应.效果如下图所示: 下面围绕的这样的 ...
- css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等
1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
随机推荐
- linux中 ls |wc -l
linux中 ls |wc -l_百度知道 答 205行,205个字,1920个字节,wc -l只输出文件行数
- readerwriterqueue 一个用 C++ 实现的快速无锁队列
https://www.oschina.net/translate/a-fast-lock-free-queue-for-cpp?cmp&p=2 A single-producer, sing ...
- kentico中page alias的使用
这里设置的path or pattern,是针对于根目录而言的
- wait/notify模拟线程池
线程创建和销毁会消耗很多的资源,当我们创建线程时,会发现cpu利用率很高,为了节省资源的使用,使用线程池是一个比较好的选择,当有任务需要执行时,随机分配给一条线程去执行,也可以删除任务,获取任务数量等 ...
- tensorflow实现线性回归、以及模型保存与加载
内容:包含tensorflow变量作用域.tensorboard收集.模型保存与加载.自定义命令行参数 1.知识点 """ 1.训练过程: 1.准备好特征和目标值 2.建 ...
- 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_7 获取Servlet原生的API
控制器里面获取常用的request对象或者Response对象. 想拿到谁, 就在参数上写上谁 再获取servletConetext并输出
- 配置 Nginx 错误页面优雅显示
[root@localhost ~]# cat /usr/local/nginx/conf/nginx.conf ...... http { location / { root html/www; i ...
- Invalid Django TIME_ZONE
在linux操作系统运行,设置的时区在系统文件/usr/share/zoneinfo/中找不到会出现以下错误 raceback (most recent call last): File , in & ...
- C# List方法中存储的问题
遇到一个bug,抓耳挠塞好久都没有解决,有必要记录一下. 现在我使用了一个多维list. IList<IList<int>> list = new List<IList& ...
- spring 给容器中注册组件的几种方式
1.@Bean 导入第三方的类或包的组件 2.包扫描+组件的标注注解(@ComponentScan: @Controller,@service,@Reponsitory,@Componet), 自己写 ...