您的位置：首页 > 其它

div盒布局

2015-12-08 18:59 239 查看

最近在应用程序中内嵌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 {
width: 100%;
height: 100%;
background-color: #f00;
}

#left {
width: 200px;
background-color: #ff0000;
}

#left_header {
-webkit-box-flex: 1;
background-color: #888888
}

#left_header div {
width: 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 {
width: 100%;
-webkit-box-flex: 1;
background-color: #ffff00;
}

#right_footer {
width: 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>

最后的效果显示如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航