两列布局(浮动、定位、flex)和三列布局(圣杯、双飞翼、flex)
demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/
两栏布局
浮动
<div class="box1">
<div class="left">left1</div>
<div class="right">right1</div>
</div>
.box1 .left{
float: left;
width: 100px;
height: 100px;
background: yellow;
}
.box1 .right {
margin-left: 100px;
height: 100px;
background: green;
}
定位
<div class="box2">
<div class="left">left1</div>
<div class="right">right1</div>
</div>
.box2 {
position: relative;
width: 100%;
height: 100px;
overflow: hidden;
}
.box2 .left{
position: absolute;
width: 100px;
height: 100px;
background: yellow;
}
.box2 .right {
margin-left: 100px;
height: 100px;
width: 100%;
background: green;
}
flex
<div class="box3">
<div class="left">left1</div>
<div class="right">right1</div>
</div>
.box3 {
display: flex;
height: 100px;
overflow: hidden;
}
.box3 .left {
width: 100px;
height: 100%;
background-color: red;
}
.box3 .right {
flex:1;
height: 100%;
background-color: greenyellow;
}
三栏布局
圣杯布局
<div class="container-grail">
<div class="middle">三列布局是一种很常见的页面布局方式,三列一般分别是子列sub、主列main和附加列extra,其中子列一般是居左的导航,且宽度固定;主列是居中的主要内容,宽度自适应;附加列一般是广告等额外信息,居右且宽度固定。
圣杯布局和双飞翼布局都可以实现这种三列布局,他们有什么特别之处呢?</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer"></div>
</div>
.container-grail {
height: 200px;
padding: 0 200px;
}
.container-grail .middle {
width: 100%;
height: 200px;
background-color: deeppink;
float:left;
min-height: 200px;
}
.container-grail .left {
width: 200px;
height: 200px;
background: blue;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
min-height: 200px;
}
.container-grail .right {
width: 200px;
height: 200px;
background: green;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
min-height: 200px;
}
.footer{
clear: both;
}
双翼布局
<div class="container-fly">
<div class="main">
<div class="main-inner">双翼布局</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer"></div>
</div>
.container-fly {
height: 200px;
}
.container-fly .main, .container-fly .left, .container-fly .right {
float: left;
min-height: 200px;
}
.container-fly .left {
margin-left: -100%;
width: 200px;
background: red;
}
.container-fly .right {
margin-left: -200px;
width: 200px;
background: blue;
}
.container-fly .main {
width: 100%;
}
.container-fly .main-inner {
margin: 0 200px 0 200px;
min-height: 200px;
background: green;
}
.footer{
clear: both;
}
flex
<div class="container-flex">
<div class="main">我是主体(优先加载)</div>
<div class="left">左边(固定宽度)</div>
<div class="right">右边(固定宽度)</div>
</div>
.container-flex {
display: flex;
}
.container-flex div {
height: 100px;
}
.container-flex .left {
order: -1
}
.container-flex .main {
flex-grow: 1;
background: red;
}
.container-flex .left, .container-flex .right {
width: 200px;
background: greenyellow;
}
相同点
圣杯和双飞翼布局解决问题一半是相同的,三栏全部float浮动,左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局
不同在
圣杯布局,为中间的div内容不被遮挡,将中间div设置了左右padding,将左右两个div用相对布局position:relative分别配合right和right属性,以便左右两栏div移动后不遮挡中间div
双飞翼布局,为了中间div内容不被遮挡,之间在中间div内容创建子div用于放置内容,在该div里用margin为左右两栏div留出位置
参考
http://www.cnblogs.com/woodk/p/5147085.html
https://liruihaod.github.io/2016/06/19/从双飞翼、圣杯布局认识flex布局/
两列布局(浮动、定位、flex)和三列布局(圣杯、双飞翼、flex)的更多相关文章
- flex实现三列布局
css3新引入的flex在某些情况下布局非常实用 因为它是弹性盒子所以自适应效果会很棒 不过各项布局方案还是各有优劣 <!DOCTYPE html> <html lang=" ...
- CSS布局:Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转:CSS布局:Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- 浮动和margin负值 三列布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- 【ExtJs】在Ext.grid.Panel中,两列的值相乘作为第三列的值的实现
如: 商品总价=商品单价*商品数量 方法: 商品总价列,使用其renderer属性,为期定义一个方法,该方法将当前record中的另外两列中2个数据相乘后渲染到该商品总价列.
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- 使用display:flex;实现两栏布局和三栏布局
一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px; ...
- CSS实现三列布局
三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...
随机推荐
- Selenium2+python自动化56-unittest之断言(assert)【转载】
前言 在测试用例中,执行完测试用例后,最后一步是判断测试结果是pass还是fail,自动化测试脚本里面一般把这种生成测试结果的方法称为断言(assert). 用unittest组件测试用例的时候,断言 ...
- python-函数(命名空间、作用域、闭包)
一.命名空间 全局命名空间 局部命名空间 内置命名空间 *内置命名空间中存放了python解释器为我们提供的名字:input,print,str,list,tuple...它们都是我们熟悉的,拿过来就 ...
- 【转】Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址
Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址 关注finddreams,一起分享,一起进步: http://blog.csdn.net/finddr ...
- sonarQube6.1 升级至6.2
在使用sonarQube6.1一段时间后,今天才发现sonarQube6.2已经更新,为了尝鲜,我决定在本机先尝试一下,如何升级至6.2 在这里,根据站点提示的升级步骤 1.下载新版本sonarQub ...
- Codeforces 1023 B.Pair of Toys (Codeforces Round #504 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Fi)
B. Pair of Toys 智障题目(嘤嘤嘤~) 代码: 1 //B 2 #include<iostream> 3 #include<cstdio> 4 #include& ...
- ubantu启动盘制作
转载自http://jingyan.baidu.com/article/b24f6c82cf50e086bfe5dae9.html 1 首先打开UltraISO软件,没有的请百度搜索,下载安装,尽量下 ...
- 洛谷 P2415 集合求和【数学公式/模拟】
给定一个集合s(集合元素数量<=30),求出此集合所有子集元素之和. 输入输出格式 输入格式: 集合中的元素(元素<=1000) 输出格式: 和 输入输出样例 输入样例#1: 2 3 输出 ...
- debug 英文翻译
declaration of 'int a' shadows a parameter :函数参数里,已经有这两个名称的变量了,指定义了同名的参数,造成了隐藏. expected primary-exp ...
- 洛谷 P3803 多项式乘法
题目背景 这是一道FFT模板题 题目描述 给定一个n次多项式F(x),和一个m次多项式G(x). 请求出F(x)和G(x)的卷积. 输入输出格式 输入格式: 第一行2个正整数n,m. 接下来一行n+1 ...
- POJ 3537:Crosses and Crosses(Multi-Nim)
[题目链接] http://poj.org/problem?id=3537 [题目大意] 在一个1*n的方格纸上下棋,谁先连三子谁就赢了,问必胜的是谁. [题解] 我们发现对于一个n规模的游戏.在i位 ...