当前位置：首页 → 问答吧 → <求助>DIV嵌套DIV问题

<求助>DIV嵌套DIV问题

时间：2010-09-06

来源：互联网

RT
在浏览器中打开看下,如何让boxright排在boxleft后面,且让bxo1,box2嵌套在boxleft里面.box3,box4嵌套在boxright里面.并且box1和2的横排效果.box3和4要竖排效果

<!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>无标题文档</title> <style type="text/css"> .header { background:#900; width:960px; height:auto; margin:0 100px; padding:0; } .fooder { background:orange; width:960px; height:60px; margin:0 100px; padding:0; } .container { margin:0 100px; padding:0; width:960px; height:auto; } .boxleft { background:#9F0; width:450px; height:auto; margin:10px 0; } .boxright { background:#639; width:450px; height:auto; margin:10px 0; } .container .boxleft .box1 { background:#CC0; width:auto; margin:10px 10px; } .container .boxleft .box2 { background:#F00; width:auto; margin:10px 10px; } .container .boxright .box3 { background:#FF0; width:auto; margin:10px 10px; } .container .boxright .box4 { background:#C69; width:auto; margin:10px 10px; } .boxleft { float:left; } </style> </head> <body> <div class="header"> <ul> 我是header <p>在浏览器中打开看下,如何让boxright排在boxleft后面,且让bxo1,box2嵌套在boxleft里面.box3,box4嵌套在boxright里面.并且box1和2的横排效果.box3和4要竖排效果</p> </ul> </div> <div class="container"> <div class="boxleft"> <p>boxleft</p> <div class="box1"><br /> <br /> <br /> BOX1<br /> <br /> <br /> </div> <div class="box2">start<br /> <br /> <br /> BOX2<br /> <br /> <br /> end</div> </div> <div class="boxright"> <p>boxright</p> <div class="box3"><br /> <br /> <br /> BOX3<br /> <br /> <br /> </div> <div class="box4"><br /> <br /> <br /> B0X4<br /> <br /> <br /> </div> </div> </div> <div class="fooder"> <ul> 我是fooder </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 auqffhvk110 于 2010-9-6 22:35 编辑 ]

作者: auqffhvk110 发布时间: 2010-09-06

<!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>无标题文档</title> <style type="text/css"> ul,li,h1 {margin:0;padding:0;}/**/ ul {list-style:none}/**/ .header { background:#900; width:960px; height:auto; margin:0 100px; padding:0; } .footer { background:orange; width:960px; height:60px; margin:0 100px; padding:0; clear:both;/**/ } .container { margin:0 100px; padding:0; width:960px; } .boxleft { background:#9F0; width:450px; height:auto; margin:10px 0; float:left;display:inline;*padding-bottom:10px/**/ } .boxleft ul li {float:left;display:inline;width:210px;height:110px;margin:10px 0 10px 10px}/**/ .boxleft .box1 {background:#CC0;}/**/ .boxleft .box2 {background:#F00;}/**/ .boxright { background:#639; width:450px; height:auto; margin:10px 0; float:right;display:inline;/**/ } .boxright ul li {height:50px;margin:10px}/**/ .boxright .box3 {background:#ff0;}/**/ .boxright .box4 {background:#C69;}/**/ .boxleft ul h1,.boxright ul h1 {font-size:16px;height:30px;line-height:30px;text-align:center;border-bottom:1px solid #fff} </style> </head> <body> <div class="header"> 我是header<br /> 在浏览器中打开看下,如何让boxright排在boxleft后面,且让bxo1,box2嵌套在boxleft里面.box3,box4嵌套在boxright里面.并且box1和2的横排效果.box3和4要竖排效果 </div> <div class="container"> <div class="boxleft"> <ul> <h1>boxleft</h1> <li class="box1">BOX1</li> <li class="box2">BOX2</li> </ul> </div> <div class="boxright"> <ul> <h1>boxright</h1> <li class="box3">BOX3</li> <li class="box4">BOX4</li> </ul> </div> </div> <div class="footer">我是fooder</div> </body> </html>
提示：您可以先修改部分代码再运行

作者: geminids 发布时间: 2010-09-07

<求助>DIV嵌套DIV问题

热门阅读

热门下载