三栏布局的n种实现

本文主要讨论左右边栏固定宽度,中间栏填满其余空间的布局。至于其他类型,基本上也就是半斤和八两。每一种布局都会有个Demo,个人依然认为文章里帖代码并没有Demo来的直接。所以正文负责解释,源码参见Demo。其中讨论了这么多种(6种)布局,有以下理由:1是每种布局也都有他的毛病,没有十全十美的,每种布局也都有人在用。2是虽然有相对优秀的方案,但是不优秀的方案也有有用的东西在里边,可能会启发其他的思路补充遗漏的知识点。

  1. 利用绝对定位特点:左右两栏采用绝对定位抽离文档流,分别固定于页面的左右两侧,中间栏用左右margin值撑开可以容纳左右边栏的距离。这个很简单不多解释。Demo:http://www.dabao.love/demo/layoutDemo/absoluteLayout.html
  2. 利用两侧浮动都不占据文档流:左栏左浮动,右栏右浮动,中间栏左右margin值等于左右栏宽度。html中,中间栏要放在左右边栏的后边。道理上和绝对定位差不多,就是不占文档流了其他元素就填充上了,只要把两边留出空间不导致重合即可。Demo:http://www.dabao.love/demo/layoutDemo/twoSidesFloatLayoutDemo.html
  3. 利用浮动和margin负值的特点:标签顺序为<middle><sub></sub></middle>  <left></left>  <right></right> middle 宽度 100%,sub 左右 margin 为左右栏留出空间,其中 sub 元素不要浮动,否则会包裹里面的内容而不会撑满空间,其他元素全部左浮动。left 的 margin-left 为-100%,right 的margin-left为sub的负的margin-right 。浮动的特点就是紧跟着前一个元素,放不下了就换行,本来middle元素占满了第一行,sub元素的margin留出的空间并不会给其他的浮动元素,左栏被迫换行,处于第二行最左侧,相当于紧跟着第一行后边,100%的负margin-left会让他从紧跟着第一行变成第一行最左边,这时左栏和sub元素的margin-left留出的空间重合,达到目的,此时右栏在原来左栏的位置,再用类似的处理方式,达到最终效果。其中sub的margin可以换为padding,相同的原理和效果。此处如果不需要撑满空间(有内容撑满sub)可以不要父元素(即middle)。Demo:http://www.dabao.love/demo/layoutDemo/floatLayoutDemo.html
  1. 利用inline-block特点:父元素包含左中右栏:(子元素顺序中,左,右)父元素设置padding为左右栏留出空间,然后中栏宽度100%占据除padding外的空间,左右栏利用margin-left等于自身宽的负值使其与中栏右边界重合,再调节left,左栏left为-100%右栏left为右栏宽度。左中右栏全部为子元素,所以margin-left无法占据padding空间,需要左右边栏相对定位后调解left值达到目标状态。其中注意父元素设置font-size: 0;    letter-spacing: -4px;   子元素再重置这两个属性。Demo:http://www.dabao.love/demo/layoutDemo/inlineBlockLayoutDemo.html
  2. 利用calc属性和inline-block特点:(同样是父元素包含左中右栏)

父元素设置:  text-align:center;    font-size: 0;      letter-spacing: -4px;

左中右栏再重置:  font-size: 16px;      letter-spacing: normal;

左右栏固定宽度,  html中元素顺序为:左,中,右    ,假设左右栏宽度和300px;

中间拦:  width:calc(100% - 300px);

百分比与固定宽度混合布局使用,支持ie9+,注意+-*/号两边留空格

Demo:http://www.dabao.love/demo/layoutDemo/useCalcLayoutDemo.html

  1. 利用flex布局:flex布局我认为是最先进而方便的布局,非常灵活不过内容也不少,只可惜兼容ie10+。不在这多废话,推荐阮一峰老师的教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool  父元素display:flex;  ,左右两栏设置flex-basis  预置宽度,中间栏flex-grow: 1;自动伸展。完活。Demo:http://www.dabao.love/demo/layoutDemo/flexLayoutDemo.html

如有纰漏欢迎批评指正,没有纰漏也欢迎拍砖。

时间: 2024-10-15 20:34:39

三栏布局的n种实现的相关文章

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

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

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

假设高度已知,请写出三栏布局,左栏.右栏宽度300px,中间宽度自适应. 这道题本身的难度并不大,我们在布局页面的时候,写个三栏布局还是挺简单的.但是如果在面试的时候遇到这道题,就没有那么简单了.看似简单的一道题,想把它答好是不简单的.往往越简单的题越不好答.如果看到这题只想到了浮动和绝对定位,那这题你连及格都及格不了. 下面是5种三栏布局的方法. 在写布局代码之前,先写两段公共的样式,此段写在头部. 样式 <style media="screen"> html *{ pa

css实现三栏布局的几种方法及优缺点

三栏布局,顾名思义就是两边固定,中间自适应. 三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应. 我们不妨假定这样一个布局:高度已知,其中左栏.右栏宽度各为300px,中间自适应,可以通过几种方法来实现?以及各自的优缺点是什么? 一.浮动布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

经典的两栏布局和三栏布局的几种简单的实现

一,三栏布局 1,两边栏宽度固定值,中间栏宽度自适应 (1)绝对定位法 [关键点]1,绝对定位从普通文档流中脱离出来,中间元素可以不用考虑左右定位元素占的位置 2,左右栏绝对定位到确定的位置上,(absolute,left,right) 3,中间栏左右外边距设置为左右栏的宽度,因此自身宽度就自适应的变成了窗口宽度-左右两边栏的宽度 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 html,body{ 6 mar

三栏布局的几种方式

1.流体布局 <!DOCTYPE html> <html lang="en"> <head> <style> /*左右浮动,中间margin或者overflow*/ /*缺点就是主要内容无法最先加载,当页面内容较多时会影响用户体验.*/ .left { float: left; height: 200px; width: 100px; background-color: red; } .right { width: 200px; heig

Layout 实现三栏布局的几种方法

https://github.com/ljianshu/Blog/issues/14    布局参考 https://github.com/ljianshu/Blog/issues/38  响应式那点事儿 https://github.com/Fundebug/fundebug-blog/issues/68   技术博客那点事儿 原文地址:https://www.cnblogs.com/reeber/p/11231659.html

详解 CSS 七种三栏布局技巧

作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?比如我打开某东的首页: 映入眼帘的就是一个常见的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应. 下面围绕的这样的目的,即左右模块固定宽度,中间模块随浏览器变化自适应,想要完成的最终效果如下图所示: 红色

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

Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏布局自适应: 代码如下 复制代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位法</title> <style>  .pa

三栏布局那些事儿

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