常见的几种布局总结_html/css_WEB
目录
本文主要介绍网页中常用的三栏布局的实现方法。
本文主要参考了下面的文章： 我熟知的三种三栏网页宽度自适应布局方法 -张鑫旭 两栏布局，三栏布局，等高布局，流式布局 -小七 CSS布局——左定宽度右自适应宽度并且等高布局 -w3cplus 八种创建等高列布局两栏布局一列定宽，一列自适应屏幕宽要实现的目标是: 左侧固定宽，右侧自适应屏幕宽。 方法一：float+margin思路：左边浮动，右边加上一个margin-left值，即可实现左边固定，右边自适应布局。 HTML和CSS如下：
两栏布局方法一
点击这里查看Demo 方法二：position+margin
思路：左边绝对定位，右栏使用margin-left实现。 HTML和CSS如下：
两栏布局方法二
左边内容主要内容 点击这里查看Demo 方法三：float+负margin
思路：利用浮动和负边距实现。 HTML和CSS如下：
两栏布局方法三
左边内容 主要内容 点击这里查看Demo 两列固定宽度
边栏在左，主内容在右 HTML和CSS如下：
两栏左右宽度固定布局
点击这里查看Demo
边栏在右，主内容在左 可以保持上面代码中的HTML结构不变，仅仅可以CSS中侧边栏的浮动方式即可：
两栏左右宽度固定布局2
点击这里查看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如下：
三栏布局之绝对定位
中间内容 点击这里查看Demo 这种方法的缺点在于：如果中间栏含有宽度的内部元素(box)，当浏览器的宽度小于一定程度时，左右两侧的固定栏和中间的box发生层叠。 方法二：margin负值法思路：首先，中间的主体是使用双层标签，外层div宽度100%显示，并且浮动。内层的div为真正的主体内容，含有左右200px的margin值。左栏和右栏都是用margin负值法，左栏左浮动，margin-left为-100%,使左栏的div定位到页面左侧；右栏也是左浮动，其margin-left值负值，大小是本身的宽度200px。 HTML和CSS如下：
三栏布局之margin负值法
中间内容 点击这里查看Demo 这种方法需要注意的是几个div的顺序， 先是主体部分div，然后再是左右两栏的div。同样存在方法一的不足，当中间栏含有一定宽度的内部块元素时，缩小浏览器窗口左右栏内容和中间块元素重叠。 方法三：自身浮动法
应用了标签浮动跟随特性，左栏左浮动，右栏右浮动，主体放在后面，可以实现自适应。 这里几个div的顺序关键是主体的div放在后面，左右两栏顺序任意。 HTML和CSS如下：
三栏布局之自身浮动法
点击这里查看Demo 这个方法的优点是简洁高效，缺点也很明显，中间栏要避免 clear: both 双飞翼布局使用浮动，负边距，和相对定位来实现。优点：
缺点：main需要额外的包装层 HTML和CSS如下：
双飞翼布局
head Main-content sub Extra Foot 先把最重要的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的内容不被遮挡的实现思路”：
HTML和CSS如下：
圣杯布局
This is the Header Main content left sidebar right sidebar This is the footer 点击这里查看Demo 左右两栏宽度自适应,中间宽度固定方法一 中间定宽，借助负margin值HTML和CSS如下：
三栏布局之中间固定
点击这里查看Demo 使用这种方法实现的效果不太理想，当浏览器窗口缩小的时候，左右两侧的内容就会被”挤掉” 方法二 使用flexHTML和CSS如下：
三栏布局之中间固定
左侧内容 中间 右侧内容 点击这里查看Demo 清除浮动用来解决父元素高度自适应高度最大的子元素。只需在浮动元素父元素添加伪类:
.container:after { content: ""; display: block; clear: both;} 未完待续。。。 |