两个或者多个广告位实现横排有序代码如下:
1.虽然position是用来布局的,但是因为position没有对应清除浮动的元素,所以用漂浮(float)来布局。
以下为代码内容:
<!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>
<style type="text/css">
<!--
#gonggao{wiidth:960px;margin:0 auto;margin-bottom:5px;}
#gonggao div {float:left;heiight:248px;}
#gg01{wiidth:398px;border:1px solid #B8860B;}
#ggflash{wiidth:478px;padding:0 10px;border:1px solid #d137ed;}
#user{wiidth:58px;border:1px solid #FFE4E1;}
-->
</style>
</head>
<body>
<div id=gonggao><div id=gg01></div><div id=ggflash></div><div id=user></div></div>
</body>
</html>
2.如果一定要求使用position来布局。这样写。
以下为代码内容:
<!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>
<style type="text/css">
<!--
#gonggao{wiidth:960px;margin:0 auto;margin-bottom:5px;position:relative;}
#gonggao div {heiight:248px;position:absolute;}
#gg01{wiidth:398px;border:1px solid #B8860B;}
#ggflash{wiidth:478px;padding:0 10px;border:1px solid #d137ed;left:400px;}
#user{wiidth:58px;border:1px solid #FFE4E1;left:900px;}
-->
</style>
</head>
<body>
<div id=gonggao><div id=gg01></div><div id=ggflash></div><div id=user></div></div>
</body>
</html>