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

目录

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

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

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

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

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

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

两栏布局

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

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

方法一：float+margin

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

HTML和CSS如下：

两栏布局方法一

• html
• css

<div id="left"></div><div id="content"></div>

点击这里查看Demo

方法二：position+margin

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

HTML和CSS如下：

两栏布局方法二

• html
• css

<div id="left">左边内容</div><div id="content">主要内容</div>

点击这里查看Demo

方法三：float+负margin

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

HTML和CSS如下：

两栏布局方法三

• html
• css

<div id="left">左边内容</div><div id="content">  <div id="contentInner">主要内容</div></div>

点击这里查看Demo

两列固定宽度

边栏在左，主内容在右

HTML和CSS如下：

两栏左右宽度固定布局

• html
• css

<div class="wraper">  <div class="header">     <h1>这是头部文字</h1>  </div>  <div class="aside sidebar">     <h2>这是侧边栏</h2>  </div>  <div class="main-content">     <h2>主要内容</h2>  </div>  <div class="footer">     <h2>这是底部内容</h2>  </div></div>

点击这里查看Demo

边栏在右，主内容在左

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

两栏左右宽度固定布局2

• html
• css

<div class="wraper">  <div class="header">     <h1>这是头部文字</h1>  </div>  <div class="aside sidebar">     <h2>这是侧边栏</h2>  </div>  <div class="main-content">     <h2>主要内容</h2>  </div>  <div class="footer">     <h2>这是底部内容</h2>  </div></div>

点击这里查看Demo

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

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

三栏布局

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

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

方法一：绝对定位法

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

三栏布局之绝对定位

• html
• css

<div id="left"></div><div id="main">    <div class="box">中间内容</div></div><div id="right"></div>

点击这里查看Demo

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

方法二：margin负值法

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

HTML和CSS如下：

三栏布局之margin负值法

• html
• css

<div id="main">    <div id="content">中间内容</div></div><div id="right"></div><div id="left"></div>

点击这里查看Demo

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

方法三：自身浮动法

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

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

HTML和CSS如下：

三栏布局之自身浮动法

• html
• css

<div id="right"></div><div id="left"></div><div id="main"></div>

点击这里查看Demo

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

双飞翼布局

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

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

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

HTML和CSS如下：

双飞翼布局

• html
• css

<div id="page">  <div id="head">head</div>  <div id="body">    <div class="main">      <div class="main-content">Main-content</div>    </div>    <div class="Sub">sub</div>    <div class="Extra">Extra</div>  </div>  <div id="foot">Foot</div></div>

先把最重要的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

<div id="page">  <div id="header"> This is the Header</div>  <div id="container">    <div id="center" class="column" >Main content</div>    <div id="left" class="column" >left sidebar </div>    <div id="right" class="column" > right sidebar </div>  </div>  <div id="footer-wrapper">    <div id="footer">This is the footer </div>  </div></div>

点击这里查看Demo

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

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

HTML和CSS如下：

三栏布局之中间固定

• html
• css

<div id="left">    <div class="inner"></div></div><div id="main">  <div class="inner"></div></div><div id="right">  <div class="inner"></div></div>

点击这里查看Demo

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

方法二 使用flex

HTML和CSS如下：

三栏布局之中间固定

• html
• css

<div class="grid">  <div class="col fluid">左侧内容</div>  <div class="col fixed">中间</div>  <div class="col fluid">右侧内容</div></div>

点击这里查看Demo

清除浮动

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

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

未完待续。。。