DIV+CSS常用网页布局技巧！

以下是我整理的DIV+CSS常用网页布局技巧，仅供学习与参考！

第一种布局：左边固定宽度，右边自适应宽度

HTML Markup

<div id="left">Left sidebar</div> <div id="content">Main Content</div>CSS Code

<style type="text/css">

*{ margin: 0; padding: 0; }

#left { float: left; width: 220px; background-color: green; }

#content { background-color: orange; margin-left: 220px;/*==等于左边栏宽度==*/ } </style>

第二种布局：左边自适应宽度,右边固定宽度

HTML Markup

<div id="wrapper" class="clearfix"><div id="content-wrapper"> <div id="content"> 左边的内容 </div></div><div id="nav"> 右边的内容</div></div>

CSS Code

body {padding: 0;margin: 0;}#wrapper {width: 960px;border: 1px solid #333;margin: 0 auto;}#nav {width: 200px;float: right;}#content-wrapper {margin-right: -200px;float: left;width: 100%;}#content {margin-right: 200px;padding: 0 10px;}.clearfix:after {height: 0;content: ".";display: block;clear: both;visibility: hidden;}

第三种布局：三栏布局，左右固定，中间自适应宽度

HTML Markup

div class="left">我是left</div><div class="right">我是right</div><div class="center">我是center</div>

CSS Code

body,div{ margin:0; padding:0;}div{ height:200px; color:#F00;}.left{ float:left; width:100px; background:#00f; _margin-right:-3px;}.right{ float:right; width:100px; background:#0f0; _margin-left:-3px;}.center{ background:#333; margin:0 100px; _margin:0 97px;}

IE6中的3px间隙bug

在ie6中，我们看到各列之间有一条3px的间隔，这是只有IE6才有的问题。如果中间那列的margin-left和margin-right都为0的话，则只要把左列的margin-right设为-3px,右列的margin-left设为-3px就行了。但如果把中间列的margin-left和margin-right分别为左右两列的宽度时，即使把左列的margin-right设为-3px,右列的margin-left设为-3px也还是没有效果。这时候还得把中间列的margin-left设为左列宽度-3px,margin-right设为右列宽度-3px才行

第四种布局：等高布局，即在实现上述三种布局的同时，还实现左中右区域高度相同（内容不限，以最大高度为准）