三栏布局的四种方法

转载 2018年04月17日 11:10:24

(1)绝对定位法

该方法有个明显的缺点,就是如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。

HTML代码:

<div class="left">Left</div>

<div class="main">Main</div>

<div class="right">Right</div>

CSS代码:

//简单的进行CSS reset

body,html{

height:100%;

padding: 0px;

margin:0px;

}

//左右绝对定位

.left,.right{

position: absolute;

top:0px;

background: red;

height:100%;

}

.left{

left:0;

width:100px;

}

.right{

right:0px;

width:200px;

}

//中间使用margin空出左右元素所占据的空间

.main{

margin:0px 200px 0px 100px;

height:100%;

background: blue;

}


(2)圣杯布局

  1. 中间部分需要根据浏览器宽度的变化而变化,所以要用100%,这里设左中右向左浮动,因为中间100%,左层和右层根本没有位置上去

  2. 把左层margin负100后,发现left上去了,因为负到出窗口没位置了,只能往上挪

  3. 按第二步这个方法,可以得出它只要挪动窗口宽度那么宽就能到最左边了,利用负边距,把左右栏定位

  4. 但由于左右栏遮挡住了中间部分,于是采用相对定位方法,各自相对于自己把自己挪出去,得到最终结果

HTML代码:

//注意元素次序

<div class="main">Main</div>

<div class="left">Left</div>

<div class="right">Right</div>

CSS代码:

//习惯性的CSS reset

body,html{

height:100%;

padding: 0;

margin: 0

}

//父元素body空出左右栏位

body {

padding-left: 100px;

padding-right: 200px;

}

//左边元素更改

.left {

background: red;

width: 100px;

float: left;

margin-left: -100%;

position: relative;

left: -100px;

height: 100%;

}

//中间部分

.main {

background: blue;

width: 100%;

height: 100%;

float: left;

}

//右边元素定义

.right {

background: red;

width: 200px;

height: 100%;

float: left;

margin-left: -200px;

position: relative;

right: -200px;

}

(3)双飞翼布局

圣杯布局实际看起来是复杂的后期维护性也不是很高,在淘宝UED的探讨下,出来了一种新的布局方式就是双飞翼布局,代码如下。增加多一个div就可以不用相对布局了,只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。

HTML代码:

<div class="main">

<div class="inner">

Main

</div>

</div>

<div class="left">Left</div>

<div class="right">Right</div>

CSS代码:

//CSS reset

body,html {

height:100%;

padding: 0;

margin: 0

}

body {

/*padding-left:100px;*/

/*padding-right:200px;*/

}

.left {

background: red;

width: 100px;

float: left;

margin-left: -100%;

height: 100%;

/*position: relative;*/

/*left:-100px;*/

}

.main {

background: blue;

width: 100%;

float: left;

height: 100%;

}

.right {

background: red;

width: 200px;

float: left;

margin-left: -200px;

height: 100%;

/*position:relative;*/

/*right:-200px;*/

}

//新增inner元素

.inner {

margin-left: 100px;

margin-right: 200px;

}
(4)浮动

HTML代码:

//注意元素次序

<div class="left">Left</div>

<div class="right">Right</div>

<div class="main">Main</div>

CSS代码:

//CSS reset

body,html {

height:100%;

padding: 0;

margin: 0

}

//左栏左浮动

.left {

background: red;

width: 100px;

float: left;

height: 100%;

}

//中间自适应

.main {

background: blue;

height: 100%;

margin:0px 200px 0px 100px;

}

//右栏右浮动

.right {

background: red;

width: 200px;

float: right;

height: 100%;

}

三栏布局的5种解决方案及优缺点

假设高度已知,请写出三栏布局,左栏、右栏宽度300px,中间宽度自适应。 这道题本身的难度并不大,我们在布局页面的时候,写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题,就没有那么简单了...
  • mrchengzp
  • mrchengzp
  • 2017-11-19 12:08:44
  • 1540

CSS三栏布局的四种方法

前言总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本...
  • Jizhen_Tan
  • Jizhen_Tan
  • 2016-12-07 22:25:39
  • 909

实现三栏布局的五种方式

需求:设高度已知,写出三栏布局,左右栏宽度为300px,中间宽度自适应。 1.float方式 基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧 ...
  • qq_36113598
  • qq_36113598
  • 2017-12-26 20:40:44
  • 137

图解DIV-CSS布局中绝对定位和浮动用法(两种分三栏布局的方法)

你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项中的绝对定位,第二种则是使用CSS中的浮动(floa...
  • WaitForFree
  • WaitForFree
  • 2013-06-17 11:30:28
  • 4191

关于三栏式布局的几种方式

一、前言 在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和实践经验。本文不讲细节,只讲外部的自适应架构...
  • Airfald
  • Airfald
  • 2017-02-28 18:09:50
  • 599

css实现等高布局 两栏自适应布局 三栏自适应布局

总结一下css常用的布局样式等高布局等高布局实现方法有很多 在这里总结常用的三种方法 padding补值法 该方法是通过负margin,同时将padding的值设为正的margin值实现的 具体实现方...
  • charlene0824
  • charlene0824
  • 2016-04-22 18:53:09
  • 2338

HTML之基本布局设计之三栏式、两栏式设计

本文主要介绍的是如何构建布局,主要利用的知识是margin、width的设置、块级元素的使用、并涉及到position、z-index、border、id等众多html的常用元素,接下来就直接上代码吧...
  • u013816144
  • u013816144
  • 2015-11-21 10:27:40
  • 3872

前端设计之CSS布局:上中下三栏自适应高度CSS布局

网页代码: CSS布局:上中下三栏自适应高度CSS布局 *{margin:0;padding:0;} body, html { margin: 0; padding:0 !import...
  • sinat_26342009
  • sinat_26342009
  • 2015-08-14 16:09:00
  • 1598

关于三栏布局(浮动法/定位法/margin负值法)

三栏布局就是页面布局主要分为左中右三个部分,普遍为左、右固定中间自适应的形式。 1.定位法三栏布局:CSS代码:html , body { margin: 0; pa...
  • Beng_shakalaka
  • Beng_shakalaka
  • 2017-07-18 15:59:53
  • 322

css3弹性盒子flex实现三栏布局

如题:高度已知,左右栏宽度300px,中间自适应:弹性盒子本身就是并排的,我们设置宽度即可。用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽...
  • qq_15241071
  • qq_15241071
  • 2018-03-07 20:33:33
  • 49
收藏助手
不良信息举报
您举报文章:三栏布局的四种方法
举报原因:
原因补充:

(最多只允许输入30个字)