Css 定位Div的不同方式

XIAOLINJAVA

浏览: 144215 次
性别:
来自: 上海

最近访客更多访客>>

jAmEs_

spedit

xingchen888

anastasiajava

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS XHTML HTML

margin方式定位Div：

<!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=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
.a1,.b1,.c1{background-color:#aaa;margin:5px;}
.a1{ height:50px;width:100px;}
.b1{ height:50px; width:100px;}
.c1{ margin-top:-110px; margin-left:110px; height:105px;}
</style>
<body>
    <div class="a1" >a1</div>
    <div class="b1">b1</div>
    <div class="c1">c1</div>
</body>
</html>

position方式定位Div：

<!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>position</title>
<style type="text/css">
body{position:relative;}
#leftTop{width:100px; height:200px; background-color:#CCCCCC; position:absolute;left:0;top:0;}
#leftBottom{width:100px; height:150px; background-color:#CCCCCC;margin-top:210px;float:left; }
#box{width:400px; margin-left:10px; height:360px; background-color:#CCCCCC;float:left;}
</style>
<style xml:base="/C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/" type="text/css" id="webdeveloper-edit-css-style-0">body{position:relative;}
#leftTop, #leftBottom, #box {background-color: #CCCCCC;}

#leftTop{ width:100px; height:200px; position:absolute;left:0;top:0;}
#leftBottom{width:100px; height:200px; margin-top:210px;float:left; }
#box{width:800px; margin-left:10px; height:410px; float:left;}

</style>
</head>
<body>
<div id="leftTop"></div>
<div id="leftBottom"></div>
<div id="box"></div>
</body>
</html>

float方式定位Div：

<!DOCTYPE html PUBLIC"-//qq8697865//史诺比//ZH" "http://www.w3c.org/tr/html4/strict.dtd">
<html><head><title></title>
<style type="text/css">
*{padding:0px auto;margin:0px auto;}
.a1,.a2,.a3{background-color:#aaa;margin:5px;}
.a1{width:20%;height:200px;float:left}
.a2{width:77%;height:310px;float:right}
.a3{width:20%;height:100px;float:left}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</body>
</html>

分享到：