关于三列样式

有志青年

浏览: 4277 次
性别:
来自: 杭州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

C C++C#XHTML HTML

三列的设计通过浮动，以及，负边距实现。
负边距的好处是：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>

效果：