<!doctype html> <html> <head> <meta charset="utf-8"> <title>Float属性布局</title> <style> .box{ width: 1000px; margin: 0 auto; display: -moz-box; display: -webkit-box; } .left{ /*float: left;*/ width: 300px; padding: 10px; background-color: green; } .right{ /*float: right;*/ width: 300px; padding: 10px; background-color: #ff39ca; } .cont{ /*float: left;*/ width: 400px; background-color: #0064ff; } .left,.cont,.right{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } </style> </head> <body> <div class="box"> <div class="left"> <h3>栏目列表</h3> <ul> <li><a href="###">栏目名称</a></li> <li><a href="###">栏目名称</a></li> <li><a href="###">栏目名称</a></li> <li><a href="###">栏目名称</a></li> </ul> </div> <div class="cont"> <p>阅谁问君诵,水落清香浮。</p> <p>阅谁问君诵,水落清香浮。</p> <p>阅谁问君诵,水落清香浮。</p> <p>阅谁问君诵,水落清香浮。</p> <p>阅谁问君诵,水落清香浮。</p> </div> <div class="right"> <h3>推荐文章</h3> <ul> <li><a href="###">推荐文章</a></li> <li><a href="###">推荐文章</a></li> <li><a href="###">推荐文章</a></li> </ul> </div> </div> </body> </html>
效果图: