最近在应用程序中内嵌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" ...
随机推荐
-
[M]带属性块参照的转换
有一张表格,表格的每一行都由带有属性的块参照组成,如图: 魔法表格不能直接识别有块参照组成的表格,需要使用 EXPLODE 命令将块参照分解,但多分解带有属性的块只能得到属性的定义 这是就需要使用 B ...
-
$.when()方法翻译
地址:http://api.jquery.com/jQuery.when/ jQuery.when( deferreds ),returns Promise 正文 Description: Provi ...
-
MySQL出现“错误1067：进程意外终止”
1.错误描述 2.错误原因 今天,我在摸索如何利用命令查看MySQL日志,查了很多资料,大多数是通过修改my.ini文件配置.我修改了配置后,准备重启MySQL服务器,先执行了net stop mys ...
-
mysql（2）—— 由笛卡尔积现象分析数据库表的连接
首先,先简单解释一下笛卡尔积. 现在,我们有两个集合A和B. A = {0,1} B = {2,3,4} 集合 A×B 和 B×A的结果集就可以分别表示为以下这种形式: A×B = {(0,2 ...
-
FB面经Prepare: Find Longest Path in a Multi-Tree
给的多叉树, 找这颗树里面最长的路径长度 解法就是在子树里面找最大的两个(或一个,如果只有一个子树的话)高度加起来. 对于每一个treenode, 维护它的最高的高度和第二高的高度,经过该点的最大路径 ...
-
【Teradata】grouping和rollup窗口函数
1.group by后带rollup子句 先按一定的规则产生多种分组,然后返回各个分组所产生的结果集的并集,且没有去掉重复数据(统计出的数据是求和还是最大值还是平均值等这就取决于SELECT后的聚合函 ...
-
session and cookie简析
无状态应用程序(cookies.session等机制出现的背景) Web应用程序服务器通常是“无状态的”: 每个HTTP请求都是独立的; 服务器无法判断2个请求是来自同一个浏览器还是用户. Web服务 ...
-
Mybatis-generator插件,用于自动生成Mapper和POJO
后台环境为springboot+mybatis. 步骤一:添加mybatis环境 <dependency> <groupId>mysql</groupId> < ...
-
关于eclipse的项目前有感叹号和errors exist in required project相关问题
一般来说 项目运行中 各个类的信息中并没有报错 但在运行中会出现errors exist in required project 且有时候运行也会成功.这种情况是由于项目中其他的类存在问题未解决 导 ...
-
ZooKeeper 的读写操作 &; 选举机制
0. 说明 记录 ZooKeeper 的读写操作和选举机制 1. ZooKeeper 的读写操作 读操作:所有 ZooKeeper 节点都可以提供读请求(包括 follower 和 leader ) ...