常见的几种布局总结_html/css_WEB-ITnose
目录
-
- 一列定宽,一列自适应屏幕宽
- 方法二:position+margin
- 方法三:float+负margin
- 一列定宽,一列自适应屏幕宽
-
- 左右两栏宽度固定,中间宽度自适应
- 左右两栏宽度自适应,中间宽度固定
- 方法一 中间定宽,借助负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
headMain-contentsubExtraFoot
先把最重要的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
This is the HeaderMain contentleft sidebarright sidebar
点击这里查看Demo
左右两栏宽度自适应,中间宽度固定
方法一 中间定宽,借助负margin值
HTML和CSS如下:
三栏布局之中间固定
- html
- css
点击这里查看Demo
使用这种方法实现的效果不太理想,当浏览器窗口缩小的时候,左右两侧的内容就会被”挤掉”
方法二 使用flex
HTML和CSS如下:
三栏布局之中间固定
- html
- css
左侧内容中间右侧内容
点击这里查看Demo
清除浮动
用来解决父元素高度自适应高度最大的子元素。只需在浮动元素父元素添加伪类:
.container:after { content: ""; display: block; clear: both;}
未完待续。。。