三栏布局的三个典型方法（圣杯、双飞翼、flex）
聊聊三栏布局----左右定宽，中间自适应。
效果图：
圣杯布局
<!DOCTYPE html>
<html>
<head lang="en">
<title>圣杯</title>
<style>
.container{
padding:0 200px 0 180px;
height:100px;
}
.left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:red;
position:relative;
left:-180px;
}
.main{
float:left;
width:100%;
height:100px;
background:blue;
}
.right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:green;
position:relative;
right:-200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>双飞翼</title>
<style>
.main{
float:left;
width:100%;
height:100px;
background:blue;
}
.left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:red;
}
.right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:green;
}
.inline{
margin:0 200px 0 180px;
}
</style>
</head>
<body>
<div class="main">
<div class="inline">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>注意：一定要在要在main中再包裹一个<div>并设置它的margin:0 180px 0 200px。
Flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex</title>
<style>
.flex {
display: flex;
flex-flow: row;
}
.left{
width: 180px;
height: 100px;
background-color: red;
}
.main{
flex: 1;
height: 100px;
background-color: blue;
}
.right {
width: 200px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="flex">
<div class="left">left</div>
<div class="main">middle</div>
<div class="right">right</div>
</div>
</body>
</html>最重要的还是要理解浮动和负margin技术以及width:100%。
三栏布局的三个典型方法（圣杯、双飞翼、flex）的更多相关文章
- Css三栏布局自适应实现几种方法
Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- ccs之经典布局（二）（两栏，三栏布局）
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
- 三种方法实现CSS三栏布局
本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...
- CSS三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
- 假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法
假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应 <!D ...
- CSS系列，三栏布局的四种方法
三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...
- 布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应
需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...
- CSS三栏布局
一.绝对定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
随机推荐
- h5表单属性的介绍
表单 type属性对应的属性值 text:代表文本框 案例:<input type="text" /> password:代表密码框 radio:单选框 checkbo ...
- Linux内核调试方法总结之栈帧
栈帧 栈帧和指针可以说是C语言的精髓.栈帧是一种特殊的数据结构,在C语言函数调用时,栈帧用来保存当前函数的父一级函数的栈底指针,当前函数的局部变量以及被调用函数返回后下一条汇编指令的地址.如下图所示: ...
- 洛谷P4317 花(fa)神的数论题(数位dp解法)
日常废话: 完了高一开学第二天作业就写不完了药丸(其实第一天就写不完了) 传传传传传送 显然爆搜肯定过不了这道题但是有60分 我们注意到在[1,n]中,有着相同的1的个数的数有很多.若有x个数有i个1 ...
- drf 视图源码详解
目录 mixin类和Generic类 CreateModelMixin 创建 ListModelMixin - 查看多条数据 RetrieveModelMixin 获取单条数据 UpdateModel ...
- Understanding ECMAScript 6 阅读问题小记
拖了一年说要看这本书,一直都没坚持下来,开个 bo 记录下觉得疑惑的问题,也算鞭策一下自己. 第一章 块级绑定 1. 第一章“块级绑定”下,说 const 变量如果绑定的是对象 Object,那么修改 ...
- Powershell 邮件发送
目录 目录 前言 Send-MailMessage NETMail 使用OutLook发送邮件 前言 最近领导想在winServer2012上搞个自动发送邮件的计划任务,下面有几种发送邮件的方式. 如 ...
- 深入理解webpack基本配置（一）
1. 安装webpack到全局 在学习构建之前,我们来在本地文件新建一个存放项目的文件夹,比如叫demo1这个项目,然后进入demo1该项目的根目录后,执行命令 npm init运行下,一路回车(先简 ...
- python2.7+appium第一个脚本（使用夜神模拟器）
搭建好环境后,可以开始准备脚本的编写工作 目录 1.安装夜神模拟器 2.使用uiautomatorviewer定位 3.运行第一个脚本 1.安装夜神模拟器 第一步:官网下载夜神模拟器,完成安装 双击下 ...
- java Iterator Iterable Collection AbstractCollection Map关系
java.lang Interface Iterable<T> 实现该接口就可以使用for-each循环. java.util Interface Iterator<E> ...
- Python3的基本数据类型
2.1. Python3中六个标准的基本数据类型: Number(数字) String(字符串) Sets(集合) Tuple(元组) List(列表) Dictionary(字典) 2.2. Pyt ...