以下是代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>三列等高</title> <style> #header { background-color: gray; height: 100px; width: 960px; } #container-1, #container-2, #container-3 { position: relative; float: left; } #container-1 { overflow: hidden; width: 960px; margin-top: 10px; background-color: red; } #container-2 { background-color: green; left: 240px; } #container-3 { float: left; background-color: blue; left: 480px; } #main, #primary, #secondary { display: inline; margin: 0 10px; position: relative; float: left; } #main { width: 460px; right: 50%; } #primary { width: 220px; right: 125%; } #secondary { right: 75%; width: 220px; } </style> </head> <body> <div id="header"></div> <div id="container-1"> <div id="container-2"> <div id="container-3"> <div id="main">Main<br />Main</div> <div id="primary">Primary</div> <div id="secondary">Secondary</div> </div> </div> </div> <div style="clear: left"> </div> </body> </html> |
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习