三列的设计通过浮动，以及，负边距实现。
负边距的好处是：1、可以让主要的div出现的前面，这样主要的内容就可以先加载进来
实现：可以设主要的内容宽度为100%，通过float，margin 来实现负边距的布局，其他的div需设定固定的宽度。
[code=html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
.wrap{width:950px; margin:0 auto; padding:0;}
#wrap-a{}
.div-left-a,.div-center-a,.div-right-a{float:left;}
.div-left-a{width:200px; background:#906;}
.div-center-a{width:400px; background:#0C6;}
.div-right-a{width:350px; background:#3CC;}
#wrap-b{}
.div-left-b{width:200px; float:left; background:#3CF;}
.div-right-b{width:350px; float:right; background:#3FC;}
.div-center-b{width:400px; background:#639; float:left;}
#wrap-c{}
.outer{ width:100%; margin-right:-350px; background:#C60; float:left;}
.inner{ margin-right:350px; background:#0C9;}
.int{margin-left:-200px; float:right; }
.div-center-c{ margin-left:200px;}
.div-left-c{ float:left; width:200px; background:#CF0; }
.div-right-c{float:right; width:350px; background:#FCC;}
</style>
</head>
<body>
<div class="wrap">
<div id="wrap-a">
<div class="div-left-a">left</div>
<div class="div-center-a">center</div>
<div class="div-right-a">right</div>
</div>
<div id="wrap-b">
<div class="div-left-b">left</div>
<div class="div-right-b">right</div>
<div class="div-center-b">center</div>
</div>
<div id="wrap-c">
<div class="outer">
<div class="inner">
<div class="int">
<div class="div-center-c">center</div>
</div>
<div class="div-left-c">left</div>
</div>
</div>
<div class="div-right-c">right</div>
</div>
</div>
</body>
</html>
[/code]
效果：
[img]http://dl.iteye.com/upload/attachment/193744/6d7c2b6b-a0bd-33bc-b447-01518fd8a3f3.jpg[/img]
负边距的好处是：1、可以让主要的div出现的前面，这样主要的内容就可以先加载进来
实现：可以设主要的内容宽度为100%，通过float，margin 来实现负边距的布局，其他的div需设定固定的宽度。
[code=html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
.wrap{width:950px; margin:0 auto; padding:0;}
#wrap-a{}
.div-left-a,.div-center-a,.div-right-a{float:left;}
.div-left-a{width:200px; background:#906;}
.div-center-a{width:400px; background:#0C6;}
.div-right-a{width:350px; background:#3CC;}
#wrap-b{}
.div-left-b{width:200px; float:left; background:#3CF;}
.div-right-b{width:350px; float:right; background:#3FC;}
.div-center-b{width:400px; background:#639; float:left;}
#wrap-c{}
.outer{ width:100%; margin-right:-350px; background:#C60; float:left;}
.inner{ margin-right:350px; background:#0C9;}
.int{margin-left:-200px; float:right; }
.div-center-c{ margin-left:200px;}
.div-left-c{ float:left; width:200px; background:#CF0; }
.div-right-c{float:right; width:350px; background:#FCC;}
</style>
</head>
<body>
<div class="wrap">
<div id="wrap-a">
<div class="div-left-a">left</div>
<div class="div-center-a">center</div>
<div class="div-right-a">right</div>
</div>
<div id="wrap-b">
<div class="div-left-b">left</div>
<div class="div-right-b">right</div>
<div class="div-center-b">center</div>
</div>
<div id="wrap-c">
<div class="outer">
<div class="inner">
<div class="int">
<div class="div-center-c">center</div>
</div>
<div class="div-left-c">left</div>
</div>
</div>
<div class="div-right-c">right</div>
</div>
</div>
</body>
</html>
[/code]
效果：
[img]http://dl.iteye.com/upload/attachment/193744/6d7c2b6b-a0bd-33bc-b447-01518fd8a3f3.jpg[/img]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
