详解 CSS 七种三栏布局技巧

作者:林东洲
链接:https://zhuanlan.zhihu.com/p/25070186
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在开发十分常见,那么什么是三栏布局?比如我打开某东的首页:

映入眼帘的就是一个常见的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应。

下面围绕的这样的目的,即左右模块固定宽度,中间模块随浏览器变化自适应,想要完成的最终效果如下图所示:

红色和蓝色宽度固定,绿色宽度自适应,下面七种方法实现的最终效果跟这个差不多,可能会稍有不同。

下面七种技巧各有千秋,在开发中可以根据实际需求选择适合自己的方法进行编码。

1. 流体布局

.left { float: left; height: 200px; width: 100px; background-color: red }
.right { width: 200px; height: 200px; background-color: blue; float: right }
.main { margin-left: 120px; margin-right: 220px; height: 200px; background-color: green }

左右模块各自向左右浮动,并设置中间模块的 margin 值使中间模块宽度自适应。

缺点就是主要内容无法最先加载,当页面内容较多时会影响用户体验。

2. BFC 三栏布局

BFC 规则有这样的描述:BFC 区域,不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。

.left { float: left; height: 200px; width: 100px; margin-right: 20px; background-color: red }
.right { width: 200px; height: 200px; float: right; margin-left: 20px; background-color: blue }
.main { height: 200px; overflow: hidden; background-color: green }

缺点跟方法一类似,主要内容模块无法最先加载,当页面中内容较多时会影响用户体验。因此为了解决这个问题,有了下面要介绍的布局方案双飞翼布局。

3. 双飞翼布局

.content { float: left; width: 100% }
.main { height: 200px; margin-left: 110px; margin-right: 220px; background-color: green }
//用于清除浮动
.main::after { display: block; content: ""; font-size: 0; height: 0; clear: both }
.left { float: left; height: 200px; width: 100px; margin-left: -100%; background-color: red }
.right { width: 200px; height: 200px; float: right; margin-left: -200px; background-color: blue }

利用的是浮动元素 margin 负值的应用,感兴趣的同学可以上网搜搜原理。

主体内容可以优先加载,HTML 代码结构稍微复杂点。

4. 圣杯布局

.container { margin-left: 120px; margin-right: 220px }
.main { float: left; width: 100%; height: 300px; background-color: red }
.left { float: left; width: 100px; height: 300px; margin-left: -100%; position: relative; left: -120px; background-color: blue }
.right { float: left; width: 200px; height: 300px; margin-left: -200px; position: relative; right: -220px; background-color: green }

跟双飞翼布局很像,有一些细节上的区别,相对于双飞翼布局来说,HTML 结构相对简单,但是样式定义就稍微复杂,也是优先加载内容主体。

5. Flex 布局

.container { display: flex }
.main { height: 300px; background-color: red }
.left { margin-right: 20px; height: 300px; background-color: blue }
.right { margin-left: 20px; height: 300px; background-color: green }

简单实用,未来的趋势,需要考虑浏览器的兼容性。

6. Table 布局

.container { display: table; width: 100% }
.left,.main,.right { display: table-cell }
.left { width: 200px; height: 300px; background-color: red }
.main { background-color: blue }
.right { width: 100px; height: 300px; background-color: green }

缺点:无法设置栏间距

7. 绝对定位布局

.container { position: relative }
.main { height: 400px; margin: 0 120px; background-color: green }
.left { position: absolute; width: 100px; height: 300px; left: 0; top: 0; background-color: red }
.right { position: absolute; width: 100px; height: 300px; background-color: blue; right: 0; top: 0 }

简单实用,并且主要内容可以优先加载。

时间: 02-02

详解 CSS 七种三栏布局技巧的相关文章

记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用一行.像这样 当屏幕大于600px时,是这样 我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来... 下面是代码: <!DOCTYPE> <html> <head> <style> body{ margin: 0 ; padding: 0

三栏布局那些事儿

中间宽度自适应,两边宽度固定的三栏布局,是前端页面开发中极为常见网站布局方式.博主认为,一名合格的前端工程师总是会将之熟记于心.以下是博主总结的五种三栏布局的常用方法,与大家分享. 正文 1.浮动布局 浮动布局是一种极易理解,也是初学者首先想到的布局方式.仅借用CSS的float属性即可轻松实现.html代码 <div class="left">Left</div> <div class="right">Right</div

转载:CSS实现三栏布局的四种方法示例

转载网址:http://www.jb51.net/css/529846.html 前言 其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具体的介绍了三栏布局的四种方法,并介绍了它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 HTML代码如下: <div class="left&quo

CSS总结(七)——常见的两栏、三栏布局

一.两栏布局 — 左栏固定宽度,右栏宽度自适应 1. 左浮动+margin <div class=“left”></div> <div class=“main”></div> css:  .left{width:200px;float:left;} .main{margin-left:200px;} ps:    IE6中可能出现双margin的bug,可以通过display:inline来解决 2.  绝对定位 + margin-left (兼容性好) &

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

使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为首页上的内容往往可以完全控制.后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度.这篇博文,就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子上.那就来老生常谈一次吧,CSS之

详解CSS float属性

CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的应用,出现的问题和解决方案. 基础知识 float,顾名思义就是浮动,设置了float属性的元素会根据属性值向左或向右浮动,我们称设置了float属性的元素为浮动元素.浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕.举例说明如下:Html代码: 1 <div

详解CSS position属性

position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移.postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于positon属性的一些理论与应用. 基础知识 postion属性我们成为定位,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性. position四种类型 (1)staticstatic是position属性的默认值,默认情况下,块级元

免费的HTML5连载来了《HTML5网页开发实例详解》连载(三)DOCTYPE和字符集

在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HTML借鉴了XML中DOCTYPE的使用方法,并赋予了新用法,如大家熟知的触发浏览器的标准模式.假使在制作一张页面时,没有设定DOCTYPE,则浏览器会以怪异模式状态进行处理(即Quirks模式),该模式与标准模式在盒模型.样式.布局等都存在较大差异.因此,DOCTYPE在制作页面时是不可或缺的部分.

详解CSS的相对定位和绝对定位

原文地址:http://www.3lian.com/edu/2015/01-31/191131.html 详解CSS的相对定位和绝对定位 感谢 3lian8 的投递 时间:2015-01-31 来源:cmsgood zcp CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效,比如你设置一个距离左边距偏移100p