两列布局(浮动、定位、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确定位 ...
随机推荐
- GIT指令简洁篇
查看.添加.提交.删除.找回,重置修改文件 git help <command> # 显示command的help git show # 显示某次提交的内容 git show $id gi ...
- VS2010编写C++程序出现error C1010: 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "StdAfx.h"”?
用VS2010编写C++程序,编译时出现如下错误: 修改方法: 右击项目,选择属性 点击确定,重新编译,错误解决.
- springBoot Feign Hystrix Dashboard
1.引入依赖 <!-- 引入关于 hystrix Dashboard的依赖 --> <dependency> <groupId>org.springframewor ...
- 阿里云linux下修改mysql默认密码(xampp环境)- 原创
1.修改MySQL的登录设置: # vi /etc/my.cnf 在[mysqld]的段中加上一句:skip-grant-tables 例如: [mysqld] datadir=/var/lib/my ...
- hdu5790
都快忘了在这类题的经典做法了…… 将字符串一个个的插入字典树,在字典树维护好有该前缀串s的最大编号字符串j,我们记作j控制了前缀串s 对于当前的第i个字符串,维护此时有当前每个字符串控制了多少个前缀串 ...
- 在Ubuntu 16.04安装 Let’s Encrypt并配置ssl
1.安装前准备 1)要确保python的默认版本为2.7及以上版本. 2)需要配置的apache.nginx需要提前配置绑定域名. 2.安装ssl 在这个https://certbot.eff.org ...
- Django CRM查询(一对多,多对多以及相关的反查)
Customer模型: class Customer(models.Model): name = models.CharField(max_length=32) qq = models.CharFie ...
- HDU 1106 排序(排序)
输入一行数字,如果我们把这行数字中的‘5’都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以‘0’开头,这些头部的‘0’应该被忽略掉,除非这个整数就是由若干个‘0’组成的,这时这个整数 ...
- HashSet如何排序
方法一: 把HashSet保存在ArrayList里,再用Collections.sort()方法比較 private void doSort(){ final HashSet<Integer& ...
- 洛谷 P3041 [USACO12JAN] Video Game Combos
题目描述 Bessie is playing a video game! In the game, the three letters 'A', 'B', and 'C' are the only v ...