两个或者多个广告位实现横排有序代码如下：
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{width:960px;margin:0 auto;margin-bottom:5px;} #gonggao div {float:left;height:248px;} #gg01{width:398px;border:1px solid #B8860B;} #ggflash{width:478px;padding:0 10px;border:1px solid #d137ed;} #user{width: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{width:960px;margin:0 auto;margin-bottom:5px;position:relative;} #gonggao div {height:248px;position:absolute;} #gg01{width:398px;border:1px solid #B8860B;} #ggflash{width:478px;padding:0 10px;border:1px solid #d137ed;left:400px;} #user{width: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> |
