常见的几种布局总结_html/css_WEB-ITnose

原创
2016-06-21 08:53:15834浏览

目录

    1. 一列定宽,一列自适应屏幕宽
      1. 方法二:position+margin
      2. 方法三:float+负margin
    1. 左右两栏宽度固定,中间宽度自适应
    2. 左右两栏宽度自适应,中间宽度固定
      1. 方法一 中间定宽,借助负margin值

本文主要介绍网页中常用的三栏布局的实现方法。

本文主要参考了下面的文章:

我熟知的三种三栏网页宽度自适应布局方法 -张鑫旭

两栏布局,三栏布局,等高布局,流式布局 -小七

CSS布局——左定宽度右自适应宽度并且等高布局 -w3cplus

八种创建等高列布局

两栏布局

一列定宽,一列自适应屏幕宽

要实现的目标是: 左侧固定宽,右侧自适应屏幕宽。

方法一:float+margin

思路:左边浮动,右边加上一个margin-left值,即可实现左边固定,右边自适应布局。

HTML和CSS如下:

两栏布局方法一

  • html
  • css

点击这里查看Demo

方法二:position+margin

思路:左边绝对定位,右栏使用margin-left实现。

HTML和CSS如下:

两栏布局方法二

  • html
  • css

左边内容
主要内容

点击这里查看Demo

方法三:float+负margin

思路:利用浮动和负边距实现。

HTML和CSS如下:

两栏布局方法三

  • html
  • css

左边内容
主要内容

点击这里查看Demo

两列固定宽度

边栏在左,主内容在右

HTML和CSS如下:

两栏左右宽度固定布局

  • html
  • css

这是头部文字

主要内容

点击这里查看Demo

边栏在右,主内容在左

可以保持上面代码中的HTML结构不变,仅仅可以CSS中侧边栏的浮动方式即可:

两栏左右宽度固定布局2

  • html
  • css

这是头部文字

主要内容

点击这里查看Demo

其他实现两列固定宽度布局的方式:

http://www.w3cplus.com/css/layout/fixed-layout/two-columns-2.html

http://www.w3cplus.com/css/layout/fixed-layout/two-columns-3.html

三栏布局

要实现的目标是:左中右三栏布局,左右两栏宽度固定(设为200px),中间宽度自适应。

左右两栏宽度固定,中间宽度自适应

方法一:绝对定位法

思路:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用margin值撑开距离。HTML和CSS如下:

三栏布局之绝对定位

  • html
  • css

中间内容

点击这里查看Demo

这种方法的缺点在于:如果中间栏含有宽度的内部元素(box),当浏览器的宽度小于一定程度时,左右两侧的固定栏和中间的box发生层叠。

方法二:margin负值法

思路:首先,中间的主体是使用双层标签,外层div宽度100%显示,并且浮动。内层的div为真正的主体内容,含有左右200px的margin值。左栏和右栏都是用margin负值法,左栏左浮动,margin-left为-100%,使左栏的div定位到页面左侧;右栏也是左浮动,其margin-left值负值,大小是本身的宽度200px。

HTML和CSS如下:

三栏布局之margin负值法

  • html
  • css

中间内容

点击这里查看Demo

这种方法需要注意的是几个div的顺序, 先是主体部分div,然后再是左右两栏的div。同样存在方法一的不足,当中间栏含有一定宽度的内部块元素时,缩小浏览器窗口左右栏内容和中间块元素重叠。

方法三:自身浮动法

应用了标签浮动跟随特性,左栏左浮动,右栏右浮动,主体放在后面,可以实现自适应。

这里几个div的顺序关键是主体的div放在后面,左右两栏顺序任意。

HTML和CSS如下:

三栏布局之自身浮动法

  • html
  • css

点击这里查看Demo

这个方法的优点是简洁高效,缺点也很明显,中间栏要避免 clear: both

双飞翼布局

使用浮动,负边距,和相对定位来实现。优点:

  • 实现内容和布局的分离
  • mian部分是自适应宽度的,任何一栏都可以是最高一栏
  • 需要的hack少,在浏览器中兼容性好

缺点:main需要额外的包装层

HTML和CSS如下:

双飞翼布局

  • html
  • css

Main-content
sub
Extra

先把最重要的main放到前面,并将main占满100%,然后是sub, extra。将三者都采用浮动布局: float:left,利用margin-left: -100%,把sub拉倒最左边,同理用margin-left: -180px将extra放到右侧。这样将sub 和extra定位到正确的位置。然后定位main:给main增加一层包裹,里层的main-content的作用目标是定位main到合适的位置,为此,引入margin。

点击这里查看Demo

圣杯布局

圣杯布局和双飞翼布局都是实现两边顶宽,中间自适应的三栏布局,中间栏放在文档流前面优先渲染。两者不同之处在于”中间栏div的内容不被遮挡的实现思路”:

  • 双飞翼布局如上介绍,是在main的内部又创建div来放置内容,在该div里设置margin-left和margin-right为左右两栏div留出位置。
  • 圣杯布局的实现思路是将div设置padding-left和padding-right后,将左右两个div用相对布局position:relative并配合right和left属性,以便左右两栏div移动后不被遮挡。

HTML和CSS如下:

圣杯布局

  • html
  • css

Main content
left sidebar

点击这里查看Demo

左右两栏宽度自适应,中间宽度固定

方法一 中间定宽,借助负margin值

HTML和CSS如下:

三栏布局之中间固定

  • html
  • css

点击这里查看Demo

使用这种方法实现的效果不太理想,当浏览器窗口缩小的时候,左右两侧的内容就会被”挤掉”

方法二 使用flex

HTML和CSS如下:

三栏布局之中间固定

  • html
  • css

左侧内容
中间
右侧内容

点击这里查看Demo

清除浮动

用来解决父元素高度自适应高度最大的子元素。只需在浮动元素父元素添加伪类:

.container:after { content: ""; display: block; clear: both;}

未完待续。。。

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。