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" ...
随机推荐
- 设置ios中imageView图片自适应，
UIIimageView *imageView = [UIImageView alloc]init]; [imageView setContentScaleFactor:[[UIScreen mai ...
- CharSequence 接口
java中有些方法需要用到CharSequence 类型的参数,笔者百度了一下,总结出一下几点: 1.CharSequence 是一个接口,可以直接用“=”赋值一段字符串,但是不能用new新建一个对象 ...
- 多线程随笔一（AutoResetEvent和ManulResetEvent）
AutoResetEvent和ManulResetEvent是.net中用来做线程的同步的两个类.从类名上不难看出,这两个类的区别在于一个是自动的,一个是手动的(这不是废话嘛).两个类的实现原理大致相 ...
- xml文件查找重复元素（超简单版）
使用WPS,新建一个表格文件,将xml拖入表格,点数据,选中存在重复项的列,点高亮重复项,OK.
- jQuery 设置select默认选中问题
在进行其他操作后,恢复select默认选中 html代码: <select id="shai" style="width:150px;margin:5px 50px ...
- DIV+CSS 让同一行的图片和文字对齐
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
- vs2010帮助文档下载以及帮助查看器（H3Viewer）的使用
在工作中遇到想查看vs2010的帮助文档.推荐使用H3Viewer.一个第三方的免费软件,独立于VS2010运行的帮助查看器.这方面的资料并不多.把本次自己使用的心得分享给大家. H3Viewer官方 ...
- C# lesson3
一.局部变量和成员变量 1.程序入口(Main)要调用非静态成员(变量或方法)的话,是需要通过对象去调用的: 2.普通方法里面去调用变量或方法的话可以直接调用 成员变量(全局变量):放在Main方法之 ...
- 关于并行计算的Scan操作
simple and common parallel algorithm building block is the all-prefix-sums operation. In this chapte ...
- BeanUtils属性
1.copyproperties:拷贝方法 (1).当源对象(a)中存在一个java.sql.Date类型的属性并且值为null,目标对象(b)中也存在这个同名同类型的属性.把a对象属性值c ...