Css 定位Div的不同模式
日期：2014-05-17 浏览次数：20625 次
Css 定位Div的不同方式
margin方式定位Div：
position方式定位Div：
float方式定位Div：
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
