当前位置：首页 → 问答吧 → 这两段代码让我很纠结，哪位大神来救救我····

这两段代码让我很纠结，哪位大神来救救我····

时间：2011-04-19

来源：互联网

这是个多模块等高的代码，问题是，我给中间的元素一个外边距就没等高效果了··
有效代码：

<!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> *{ margin:0; padding:0;} .equal{ padding-bottom:9999px; margin-bottom:-9999px;} .con{ width:1000px; overflow:hidden; border:1px solid #333; margin:0 auto;} .left{ float:left; width:200px; background:#F00;} .left div{ width:200px;} .center{ float:left; width:500px; background:#CCC;} .center div{ width:500px;} .right{ float:left; width:200px; background:#033;} .right div{ width:200px;} </style> </head> <body> <div class="con"> <ul class="left equal"> <li class="left_item">111</li> <li class="left_item">111</li> <li class="left_item">1</li> </ul> <div class="center equal"> <div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div> </div> <div class="right equal"> <div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div> </div> </div> </body> </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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多模块登高</title> <style> *{ margin:0; padding:0;} .equal{ padding-bottom:9999px; margin-bottom:-9999px;} .con{ width:1000px; overflow:hidden; border:1px solid #333; margin:0 auto;} .left{ float:left; width:200px; background:#F00;} .left div{ width:200px;} .center{ float:left; width:500px; background:#CCC; margin:0 50px;} .center div{ width:500px;} .right{ float:left; width:200px; background:#033;} .right div{ width:200px;} </style> </head> <body> <div class="con"> <ul class="left equal"> <li class="left_item">111</li> <li class="left_item">111</li> <li class="left_item">1</li> </ul> <div class="center equal"> <div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div> </div> <div class="right equal"> <div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: wwdsnn 发布时间: 2011-04-19

<!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> *{ margin:0; padding:0;} .equal{ padding-bottom:9999px!important; margin-bottom:-9999px!important;overflow:hidden;} .con{ width:1000px; overflow:hidden; border:1px solid #333; margin:0 auto;} .left{ float:left; width:200px; background:#F00;} .left div{ width:200px;} .center{ float:left; width:500px; background:#CCC; margin:0 50px;} .center div{ width:500px;} .right{ float:left; width:200px; background:#033;} .right div{ width:200px;} </style> </head> <body> <div class="con"> <ul class="left equal"> <li class="left_item">111</li> <li class="left_item">111</li> <li class="left_item">1</li> </ul> <div class="center equal"> <div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div> </div> <div class="right equal"> <div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div><div>测试内容</div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 businessDiv 于 2011-4-19 13:46 编辑 ]

作者: businessDiv 发布时间: 2011-04-19

这两段代码让我很纠结，哪位大神来救救我····

热门阅读

热门下载