CSS三栏布局
一、绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.container{
position: relative;
}
.left{
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: blue;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: green;
}
.center{
margin: 0px 100px;
height: 100px;
background: gray;
}
</style>
</head> <body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">rigth</div>
</div>
</body>
</html>
二、浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.left{
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
.right{
float: right;
width: 100px;
height: 100px;
background-color: red;
}
.center{
height: 100px;
margin: 0 100px;
background-color: green;
}
</style>
</head> <body>
<div>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
</body>
</html>
三、圣杯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.container{
height: 100px;
padding: 0 100px 0 100px;
}
.center{
float: left;
width: 100%;
height: 100%;
background: #808080;
}
.left{
position: relative;
left: -100px;
float: left;
width: 100px;
height: 100%;
background: red;
margin-left: -100%;
}
.right{
position: relative;
right: -100px;
float: left;
width: 100px;
height: 100%;
background: green;
margin-left: -100px;
}
</style>
</head> <body>
<div class="container">
<!-- 中间的 div 必须写在最前面 -->
<div class="center">center</div>
<div class="left">left</div>
<div class="right">rigth</div>
</div>
</body>
</html>
1.中间盒子的宽度设置为 width: 100%; 独占一行；
2.使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；
.left {margin-left:-100%;} 把左边的盒子拉上去
.right {margin-left：-右边盒子宽度px;} 把右边的盒子拉上去
3.父盒子设置左右的 padding 来为左右盒子留位置；
4.对左右盒子使用相对布局来占据 padding 的空白，避免中间盒子的内容被左右盒子覆盖；
四、双飞翼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.container{
height: 100px;
}
.center{
float: left;
width: 100%;
height: 100%;
background: #808080;
}
.center-inner{
margin: 0 100px;
}
.left{
float: left;
width: 100px;
height: 100%;
background: red;
margin-left: -100%;
}
.right{
float: left;
width: 100px;
height: 100%;
background: green;
margin-left: -100px;
}
</style>
</head> <body>
<div class="container">
<!-- 中间的 div 必须写在最前面，并且中间的盒子再套一个div -->
<div class="center">
<div class="center-inner">center</div>
</div>
<div class="left">left</div>
<div class="right">rigth</div>
</div>
</body>
</html>
1.中间盒子的宽度设置为 width: 100%; 独占一行；
2.使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；
3.在中间盒子里面再添加一个 div，然后对这个 div 设置 margin-left 和 margin-right来为左右盒子留位置；
五、圣杯和双飞翼异同
圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
两种方法基本思路都相同：首先让中间盒子 100% 宽度占满同一高度的空间，在左右两个盒子被挤出中间盒子所在区域时，使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。
主要区别在于 如何使中间盒子的内容不被左右盒子遮挡：
圣杯布局的方法：设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位；
双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子。
简单说起来就是双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了，少设置几个属性。
六、Flexbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.container{
display: flex;
flex-direction: row;
height: 100px;
}
.left{
flex-basis: 100px;
height: 100%;
background: #0000FF;
}
.center{
flex-grow: 1;
height: 100%;
background: gray; }
.right{
flex-basis: 100px;
height: 100%;
background: #0000FF;
}
</style>
</head> <body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">rigth</div>
</div>
</body>
</html>
CSS三栏布局的更多相关文章
- Css三栏布局自适应实现几种方法
Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...
- css三栏布局方案整理
日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...
- 三种方法实现CSS三栏布局
本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...
- CSS三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
- CSS 三栏布局入门
首先,我是CSS盲[只听说过box model],没动手实践过,关于margin padding只知名称,不明细节.刚看过一叶斋大哥关于css布局的博文,再动手实践,动手记录下点滴积累以备后用. &l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- CSS布局：Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转：CSS布局：Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
随机推荐
- vue-cli+webpack项目，修改项目名称
使用vue-cli+webpack创建的项目,修改文件名称或者更改文件的位置,运营时会报错,是因为npm项目,在安装依赖(node_nodules)时,会记录当前的文件路径,当修改之后就无法正常启动. ...
- 在服务器上搭建wordpress个人博客 php7.2+nginx+mysql+wordperss
买了台VPS,准备搭建一个博客.用过几个博客框架还是觉得Wordpress好用.主题多,插件也非常的便利,而且大多还免费开源.搭建也很简单,其实安装好php+mysql+nginx+wordpress ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 【IDEA&&Eclipse】3、IntelliJ IDEA 的 20 个代码自动完成的特性
在这篇文章中,我想向您展示 IntelliJ IDEA 中最棒的 20 个代码自动完成的特性,可让 Java 编码变得更加高效.对任何集成开发环境来说,代码的自动完成都是最最重要的一项功能,它根据你输 ...
- PHP FastCGI进程管理器PHP-FPM的架构
一个master进程,支持多个pool,每个pool由master进程监听不同的端口,pool中有多个worker进程.每个worker进程都内置PHP解释器,并且进程常驻后台,支持prefork动态 ...
- 设计模式之命令模式（Command ）
命令模式是我们能够实现发送者和接收者之间的完全解耦,发送者是调用操作的对象,而接收者是接收请求并执行特定操作的对象.通过解耦,发送者无需了解接收者的接口.在这里,请求的含义是需要被执行的命令. 作用 ...
- Python编程-从入门到实践 Eric Matthes 著 袁国忠 译 - - 第二章 动手试一试
因为第一章的动手试一试基本都是探索性的,所以直接进入第二章. # 2.2 动手试一试 # 2_1 简单消息: 将一条消息存储到变量中,再将其打印出来. message = 'python 编程从入门到 ...
- Ps—导出：sql作业配合ps导出csv文件
$dateText=Get-Date #获取当前日期时间 $dateText = $dateText.ToShortDateString() #转为短日期格式(去掉时间部分) $checkDate=( ...
- Salesforce的数据安全防护措施
通过Salesforce,我们可以配置或开发出功能强大的网络应用.与此同时,无论作为管理员还是开发者,我们都要面对数据安全的问题. 常见的数据安全隐患有: SQL注入 跨站脚本攻击 跨站请求伪造 点击 ...
- IE和Chrome执行javascript对鼠标双击事件的不同响应
最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下: 由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能, ...