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" ...
随机推荐
- JAVA环境变量配置详解
JAVA环境变量JAVA_HOME.CLASSPATH.PATH设置详解 Windows下JAVA用到的环境变量主要有3个,JAVA_HOME.CLASSPATH.PATH. JAVA_HOME 指向 ...
- 关于MongoDB数据库中文件唯一性的问题
※重要※——介绍一下我的环境:MongoDB的“win32-x86_64-2008plus-ssl-3.0.5”,MongoVUE版本是1.6.9,VS2010,dll是1.10版本. MongoDB ...
- unity笔录
----------------------------unity项目在启动splash的时候黑屏 原因不明------------------测试复制项目 用剔除法测试 笔录开始 先用原版本打包 ...
- SharpZipLib.dll 压缩文件，可以应用于MVC, webform. C# windows application 等等地方
Nuget 安装:Install-Package ICSharpCode.SharpZipLib.dll private void WriteZipFile(string[] filesToZip, ...
- ArcGIS 10.5 named user介绍
1 Named user概述 1.1 Named user简介 Named user是ArcGIS产品自10.3版本正式推出的一种以用户为中心的授权机制,也称"授权 ...
- json_encode不编码中文字符的方式
json_encode($array,JSON_UNESCAPED_UNICODE);
- STM32普通定时器(TIM2-7)的时钟源
STM32普通定时器(TIM2-7)的时钟源
- 寒假学干货之------ 初学者关于fragment_main（碎片的困扰）
我们在activity_main中编写的框架,会被fragment_main中的取代掉,是因为新版的ADT为了配合平板Android3.0开发 起作用的代码在MainActivity.java中 pa ...
- Shell错误[: missing `]'
shell 文件运行时出现错误: [: missing `]' 原因可能是 if [ ! -d $date] then mkdir ./$date fi 代码中的 ] 方括号内部必须要有个空格 ...
- 真正实现Netty私有协议开发
首先<Netty权威指南>私有协议开发那一章的样例代码是编译不通过的(但是这丝毫不影响本书的价值)处理方案可以参考:http://www.itnose.net/detail/6112870 ...