css 浮动和定位的两种三栏布局

最新推荐文章于 2025-04-24 15:54:03 发布

「已注销」

最新推荐文章于 2025-04-24 15:54:03 发布

阅读量653

点赞数

文章标签： css float

本文链接：https://blog.youkuaiyun.com/xin_l_o/article/details/6522975

版权

Code:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="WWW.DOWNG.COM" />
<title>css 浮动和定位的两种三栏布局</title>
<style type="text/css">
*{margin:0;padding:0;}
body{text-align:center;}
.wrap{margin:auto;position:relative;text-align:left;width:800px;}
/*浮动*/
#left{float:left;background-color: silver;width:150px;}
#middle{float:left;width:500px;background-color:pink;}
#right{
float:left;
background-color:gray;width:150px;}
.footer{clear:both;background-color:black;color:white;}
/*相对定位*/
/* #left{position:absolute;left:0px; top:50px;width:150px;background-color: silver}
#middle{position:absolute;left: 150px;top:50px;width:500px;background-color:pink;}
#right{position:absolute;left: 650px;top:50px;width:150px;background-color: silver}
.footer{display:none;}
}*/
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="wrap">
<div id="left">left
</div>
<dir id="middle">middle
</dir>
<dir id="right">right
</dir>
<dir class="footer">
footer
</dir>
</div>
</body>
</html>