百转千回,万物皆变心不动,任清风自流。

html,css,jQuery,javascript,php,mysql,dedecms,phpcms,wordpress,linux,windows
  首页  :: 订阅 订阅  :: 管理

左右等高的布局 CSS

Posted on 2012-05-03 10:53  李潇喃  阅读(143)  评论(0)    收藏  举报
<!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"> * { margin: 0; padding: 0; } body { margin:30px; font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体, sans-serif; } .main { overflow: hidden; width: 800px; margin: 0 auto; } .left { float: left; width: 250px; overflow: hidden; } .center { float:left; margin-left:5px; width:295px; } .right { float: right; width: 245px; overflow: hidden; } .bor_top { height:1px; background:#FB9D51; overflow:hidden; } .equal { padding-bottom: 32767px; margin-bottom: -32767px; } .box { background: #F5E2AF; border: 1px #FB9D51 solid; padding-left:10px; padding-right:10px; } .mt5 { margin-top: 5px; } </style> </head> <body> <div> <div> <div> <p>你相信这个左右等高的布局是纯的CSS写的吗?</p> </div> <div> <p>来测试一下吧?~!</p> </div> <div> <p>测试一下</p> </div> <div> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> </div> <div> <div> <p>不由得你不信,这个的确是纯CSS写的</p> </div> <div> <p>来测试一下吧?~!</p> </div> <div> <p>测试一下</p> </div> <div> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> </div> <div> <div> <p>测试一下</p> <p>测试一下</p> </div> <div> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> <div> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> <div> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> </div> </div> <div> <div></div> <div></div> <div></div> </div> </body> </html>