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)的更多相关文章

  1. flex实现三列布局

    css3新引入的flex在某些情况下布局非常实用 因为它是弹性盒子所以自适应效果会很棒 不过各项布局方案还是各有优劣 <!DOCTYPE html> <html lang=" ...

  2. CSS布局:Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  3. 转:CSS布局:Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  4. 浮动和margin负值 三列布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  6. 【ExtJs】在Ext.grid.Panel中,两列的值相乘作为第三列的值的实现

    如: 商品总价=商品单价*商品数量 方法: 商品总价列,使用其renderer属性,为期定义一个方法,该方法将当前record中的另外两列中2个数据相乘后渲染到该商品总价列.

  7. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  8. 使用display:flex;实现两栏布局和三栏布局

    一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px; ...

  9. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

随机推荐

  1. GIT指令简洁篇

    查看.添加.提交.删除.找回,重置修改文件 git help <command> # 显示command的help git show # 显示某次提交的内容 git show $id gi ...

  2. VS2010编写C++程序出现error C1010: 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "StdAfx.h"”?

    用VS2010编写C++程序,编译时出现如下错误: 修改方法: 右击项目,选择属性 点击确定,重新编译,错误解决.

  3. springBoot Feign Hystrix Dashboard

    1.引入依赖 <!-- 引入关于 hystrix Dashboard的依赖 --> <dependency> <groupId>org.springframewor ...

  4. 阿里云linux下修改mysql默认密码(xampp环境)- 原创

    1.修改MySQL的登录设置: # vi /etc/my.cnf 在[mysqld]的段中加上一句:skip-grant-tables 例如: [mysqld] datadir=/var/lib/my ...

  5. hdu5790

    都快忘了在这类题的经典做法了…… 将字符串一个个的插入字典树,在字典树维护好有该前缀串s的最大编号字符串j,我们记作j控制了前缀串s 对于当前的第i个字符串,维护此时有当前每个字符串控制了多少个前缀串 ...

  6. 在Ubuntu 16.04安装 Let’s Encrypt并配置ssl

    1.安装前准备 1)要确保python的默认版本为2.7及以上版本. 2)需要配置的apache.nginx需要提前配置绑定域名. 2.安装ssl 在这个https://certbot.eff.org ...

  7. Django CRM查询(一对多,多对多以及相关的反查)

    Customer模型: class Customer(models.Model): name = models.CharField(max_length=32) qq = models.CharFie ...

  8. HDU 1106 排序(排序)

    输入一行数字,如果我们把这行数字中的‘5’都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以‘0’开头,这些头部的‘0’应该被忽略掉,除非这个整数就是由若干个‘0’组成的,这时这个整数 ...

  9. HashSet如何排序

    方法一: 把HashSet保存在ArrayList里,再用Collections.sort()方法比較 private void doSort(){ final HashSet<Integer& ...

  10. 洛谷 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 ...