css三栏布局技巧,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;

}

left

center

rigth

二、浮动

.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;

}

left

right

center

三、圣杯

.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;

}

center

left

rigth

1.中间盒子的宽度设置为 width: 100%; 独占一行；

2.使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；

.left {margin-left:-100%;} 把左边的盒子拉上去

.right {margin-left：-右边盒子宽度px;} 把右边的盒子拉上去

3.父盒子设置左右的 padding 来为左右盒子留位置；

4.对左右盒子使用相对布局来占据 padding 的空白，避免中间盒子的内容被左右盒子覆盖；

四、双飞翼

.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;

}

center

left

rigth

1.中间盒子的宽度设置为 width: 100%; 独占一行；

2.使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；

3.在中间盒子里面再添加一个 div，然后对这个 div 设置 margin-left 和 margin-right来为左右盒子留位置；

五、圣杯和双飞翼异同

圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

两种方法基本思路都相同：首先让中间盒子 100% 宽度占满同一高度的空间，在左右两个盒子被挤出中间盒子所在区域时，使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。

主要区别在于 如何使中间盒子的内容不被左右盒子遮挡：

圣杯布局的方法：设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位；

双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子。

简单说起来就是双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了，少设置几个属性。

六、Flexbox

.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;

}

left

center

rigth

Css三栏布局自适应实现几种方法

Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

css三栏布局方案整理

日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 ..

三种方法实现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栏会分别占用 ...

随机推荐

什么是core dump linux下用core和gdb查询出现"段错误"的地方

什么是core dump   linux下用core和gdb查询出现"段错误"的地方 http://blog.chinaunix.net/uid-26833883-id-31932 ...

TCP/IP 邮件的原理

邮件通过SMTP协议来实现,有它的服务器SMTP服务器. 它是怎么在万维网中运行的呢? 我们来看看两个案例,下面的两个图来展示. 案例一: Alice通过传统的邮件服务器发送给Bob,Bob通过HTT ...

JavaScript 堆

1.IE中不兼容ajax中data最后一个参数加逗号,其余chrome Firefox均支持. code: $("document ").ready(function() { $( ...

【Oracle】-【sqlplus / as sysdba登录报错问题】-新用户使用sqlplus / as sysdba登录报错

刚才打开一个别人的测试库,用root登陆了的,sqlplus / as sysdba竟然报错,奇怪,于是在自己的VM中模拟该过程. 新建了一个test用户: [test@liu bin]# ./sql ...

JSP标签c:forEach实例

JSP标签c:forEach实例 1.实例源码

春天aopframework实现

Java的代码   包 cn.itcast.day3.aopframework; 进口 java.io.IOException的; 进口 的java.io.InputStream; 进口 java.u ...

proxy_set_header Host 所引发的凶案

背景介绍:新搭建了一套测试环境.slb为2.2.2.2,由于应用的特殊性,需要走 test.aaa.com.cn 域名,而该域名在老的测试服务器1.1.1.1有两个不能迁移的服务也在使用,故想出对策, ...

Create a Hadoop Build and Development Environment

Create a Hadoop Build and Development Environment http://vichargrave.com/create-a-hadoop-build-and-d ...

mono touch登录设计

需要对MonoTouch.Dialog-1进行引用: using System; using System.Collections.Generic; using System.Linq; using ...

webstorm启动报错

环境: 在重装完系统的电脑上第一次安装webstorm, 问题: 解决”failed to load jvm dll“的报错问题: 解决方案: 安装Microsoft Visual C++ 2010 ...