Key4ever's 窝 » 页面布局 http://www.key-4ever.com 务正业 -- 勤思考 Sat, 04 Feb 2012 09:08:02 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 用float精确定位div+css http://www.key-4ever.com/2010/01/float_in_css/ http://www.key-4ever.com/2010/01/float_in_css/#comments Sun, 31 Jan 2010 14:35:14 +0000 Key4ever http://www.key-4ever.com/?p=488 您可能也喜欢：
HTML/CSS细节
负边距实现超级流体布局
鄉
《网络营销实战密码》书评：若想入门，这是一本好书 无觅 ]]> 用position的relative和absolute定位div不方便改动。用float就不折腾了，长宽定义不溢出就行了，float的详细可以看这里，里面的实例更清晰。详细代码和效果如下。

<-点击看大图。

看起来每个div间都有2px距离，因为定义了边框border-width:1px，等同于div外加多一个1px，所以margin、height和width计算时像做小学计算题。以下是代码部分，两个文件放在同一文件夹就行了。

css代码部分，文件名style.css

body{margin:0px auto;
padding:0px;
text-align:center;}
#all{margin:0px auto;
padding:0px;
width:800px;
height:800px;
border-style:solid;
border-width:10px;
background-color:#04a2e4;
}

#head{margin:2px 2px 1px;
padding:0px;
width:794px;
height:195px;
border-style:solid;
border-width:1px;
background-color:red;
}

#left{margin:1px 1px 1px 2px;
padding:0px;
float:left;
height:396px;
width:395px;
border-style:solid;
border-width:1px;
background-color:yellow;
}

#left1{margin:2px 2px 1px;
width:389px;
height:193px;
border-style:solid;
border-width:1px;
background-color:#ffffff;
}

#left2{margin:1px 2px 2px;
width:389px;
height:193px;
border-style:solid;
border-width:1px;
background-color:#ffffff;
}

#right{margin:1px 2px 1px 1px;
padding:0px;
width:395px;
height:396px;
float:left;
border-style:solid;
border-width:1px;
background-color:green;
}

#foot{margin:1px 2px 2px 2px;
padding:0px;
width:794px;
height:195px;
border-style:solid;
border-width:1px;
float:left;
background-color:#7d90e5;
}

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>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="all">
<div id="head"></div>
<div id="left">
<div id="left1"></div>
<div id="left2"></div>
</div>
<div id="right"></div>
<div id="foot"></div>
</div>
</body>

</html>
您可能也喜欢：

HTML/CSS细节
负边距实现超级流体布局
简记：华南师范大学（大学城校区）8899音乐季的大学巡演第一站
让山寨打败流氓
无觅

随机日志

]]> http://www.key-4ever.com/2010/01/float_in_css/feed/ 10