<!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>无标题 1</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: 500px; margin: 0 auto; } .left { float: left; width: 250px; overflow: hidden; } .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 class="main"> <div class="left equal"> <div class="box"> <p>你相信这个左右等高的布局是纯的CSS写的吗?</p> </div> <div class="box mt5"> <p>来测试一下吧?~!</p> </div> <div class="box mt5"> <p>测试一下</p> </div> <div class="equal mt5 box"> <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> <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 class="equal right"> <div class="box"> <p>测试一下</p> <p>测试一下</p> </div> <div class="box mt5"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> <div class="box mt5"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> <div class="equal mt5 box"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> </div> </div> <div class="main"> <div class="left bor_top"></div> <div class="right bor_top"></div> </div> </body> </html>
你相信这个左右等高的布局是纯的CSS写的吗?
来测试一下吧?~!
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
测试一下
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步