div盒布局
最近在应用程序中内嵌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>
最后的效果显示如下：
div盒布局的更多相关文章
- CSS3-box-flex弹性盒布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS3-box盒布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 深入理解 CSS3 弹性盒布局模型
Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...
- CSS3 弹性盒布局模型(转)
简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...
- DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- div+css布局记扎
实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...
- Flex布局（伸缩盒布局）
Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型.由CSS3规范提出,这是在原有的大家非常熟悉的block, inline-blo ...
- CSS3弹性盒布局
使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变. <!DOCTYPE html> <html lang="zh-CN" ...
随机推荐
- ACM网络镜像赛
参加了东大,南理的网络镜像赛,分别答对了两道题和三道题.感觉自己完全被虐了.发现了很多自己应该去掌握的知识,找到了自己的差距.容斥原理,博弈论,等等,这将是我努力的方向. 在跟大神同学和学姐交流的过程 ...
- The Key to final data
// FinalData.java - (insert one line description here) package com.hp.ci.mgmt.perm.hal.localization; ...
- mx51的三个framebuffer，mxc_ipuv3_fb.c分析
转载:http://blog.csdn.net/jack_a8/article/details/43309169 mx51支持三个framebuffer:fb0, fb1, fb2 /dev/grap ...
- tableView区头不显示
不知道什么原因 如果设置tableView的样式为Group 则必须写代理 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; co ...
- bit、byte、k
bit(位/比特位):一个二进制数据0/1 byte(字节):简称B:1byte=8bit:一个英文字符占用1byte,一个汉字占用2byte k:1K=1024B M:1M=1024K
- fidder https以及Fiddler抓取HTTPS协议
一.浅谈HTTPS 我们都知道HTTP并非是安全传输,在HTTPS基础上使用SSL协议进行加密构成的HTTPS协议是相对安全的.目前越来越多的企业选择使用HTTPS协议与用户进行通信,如百度.谷歌等. ...
- @PostConstruct 和 @PreDestory
关于在spring 容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二 ...
- vim全局替换命令
vim全局替换命令 语法为 :[addr]s/源字符串/目的字符串/[option]全局替换命令为::%s/源字符串/目的字符串/g [addr] 表示检索范围,省略时表示当前行.如:“1,20” ...
- MongoDB高级查询用法大全
转载 http://blog.163.com/lgh_2002/blog/static/440175262012052116455/ 详见官方的手册: http://www.mongodb.org/d ...
- 关于安装第三方模块和PILLOW
看廖雪峰老师这一节的教程卡在这里挺久了 在谷歌上了搜了很久,最后根据这个教程上解决了这个问题 http://www.yihaomen.com/article/python/566.htm 觉得自己好蠢 ...