当前位置：首页 → 问答吧 → 纯css三列等高布局的问题

纯css三列等高布局的问题

时间：2011-04-11

来源：互联网

在网上看到一个三列等高布局的例子，现在想改成宽度100%的，但是在ie6、ie7里有问题，请大家帮帮忙

<!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>CSS等高布局</title> <style type="text/css"> * { margin:0; padding:0; } .wrap { overflow:hidden; width:100%; } .left, .center, .right { margin-bottom:-10000px; padding-bottom:10000px; } .left { float:left; width:25%; background:#00FFFF; } .center { float:left; width:50%; background:#FF0000; } .right { float:right; width:25%; background:#00FF00; } </style> </head> <body> <div class="wrap"> <div class="left"> <p>左边内容</p> <p>左边内容</p> <p>左边内容</p> <p>左边内容</p> <p>左边内容</p> <p>左边内容</p> <p>左边内容</p> <p>左边内容</p> <p>左边内容</p> <p>左边内容</p> </div> <div class="center"> <p>中间内容</p> <p>中间内容</p> <p>中间内容</p> <p>中间内容</p> <p>中间内容</p> <p>中间内容</p> </div> <div class="right"> <p>右边内容</p> <p>右边内容</p> <p>右边内容</p> <p>右边内容</p> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: devillq 发布时间: 2011-04-11

好像没有什么问题啊 ?

作者: rao3324180 发布时间: 2011-04-11

在ie6、ie7这俩会出问题，其他的都没事

作者: devillq 发布时间: 2011-04-11