来源http://www.jq22.com/jquery-info3251
效果：
代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> * { margin: 0; padding: 0; font-size: 12px; font-family:'Microsoft YaHei'; } #nav, #nav2 { /*盒模型*/ display: -webkit-box; display: -moz-box; display: box; /**/ margin: auto; margin-top:30px; border: 10px solid #7F8C8D; } #nav { width: 300px; height: 100px; /*横向*/ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; } #nav2 { width: 100px; height: 300px; /*纵向*/ -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } #nav div,#nav2 div { /*占有比例*/ -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; text-align:center; line-height:100px; font-size:36px; color:#fff; } #box1 { background: #1ABC9C; } #box2 { background: #3498DB; } #box3 { background: #9B59B6; } #box4 { background: #F39C12; } #box5 { background: #27AE60; } #box6 { background: #C0392B; } </style> </head> <body> <!-- 横向排列 --> <div id="nav"> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> </div> <!-- 纵向排列 --> <div id="nav2"> <div id="box4">4</div> <div id="box5">5</div> <div id="box6">6</div> </div> </body> </html>