最近在应用程序中内嵌webkit浏览器显示网页，网页的布局是自适应的，采用盒布局模型，能够实现较好的自适应效果。
<style> html,body { height: 100%; margin: 0; padding: 0; } /*盒布局*/ .box { display: -webkit-box; } /*垂直排列*/ .box_vert { -webkit-box-orient:vertical; } /*水平排列*/ .box_horz { -webkit-box-orient:horizontal; } /*box子元素顶部对齐*/ .box_start_align { -webkit-box-align: start; } /*box子元素居中对齐*/ .box_center_align { -webkit-box-align: center; } /*box子元素底部对齐*/ .box_end_align { -webkit-box-align: end; } #container { 100%; height: 100%; background-color: #f00; } #left { 200px; background-color: #ff0000; } #left_header { -webkit-box-flex: 1; background-color: #888888 } #left_header div { 40px; height: 20px; margin-right: 10px; background-color: #00ffff; } #left_content { -webkit-box-flex: 20; } #right { -webkit-box-flex: 3; background-color: #00ff00; } #right_header { height: 100px; background-color: #333333; } #right_content { 100%; -webkit-box-flex: 1; background-color: #ffff00; } #right_footer { 100%; height: 100px; background: #ff00ff; } </style> <body> <div id="container" class="box box_horz"> <div id="left" class="box box_vert"> <div id="left_header" class="box box_horz box_center_align"> <!--居中对齐--> <div>1</div> <div>2</div> </div> <div id="left_content"></div> </div> <div id="right" class="box box_vert"> <div id="right_header"></div> <div id="right_content"></div> <div id="right_footer"></div> </div> </div> </body>
最后的效果显示如下：
