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" ...
随机推荐
- MSSQL2008 中文乱码问题 （引自ljg888的专栏）
PHP向MSSQL2008中写入数据,中文乱码 首先:查看SQLserver编码格式的SQL语句为: SELECT COLLATIONPROPERTY('Chinese_PRC_Stro ...
- centos redis 安装
# wget http://download.redis.io/releases/redis-2.8.6.tar.gz # tar xzf redis-2.8.6.tar.gz # cd redis- ...
- 移动互联网app
移动互联网app 2 App测试点 2.1安全测试 2.1.1软件权限 1隐私泄露风险:包括访问手机信息.访问联系人信息等 2对App的输入有效性校验.认证.授权.敏感数据存储.数据加密等方面进行检测 ...
- web前端-雅虎34条规则优化
1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是 ...
- http请求 302解决方法
http请求+302解决方法 相关文章 当前,许多站点的部署方式都对自身的性能产生了消极影响,而网站的所有者并没有意识到这个问题.我们今天针对性的讨论以下几个常见的影响网站性能的瓶颈,观察其变化趋势, ...
- c++字体对齐
字节对齐的细节和编译器实现相关,但一般而言,满足三个准则: 1) 结构体变量的首地址能够被其最宽基本类型成员的大小所整除. 2) 结构体每个成员相对于结构体首地址的偏移量(offset)都是 ...
- 路由页面缓存开启 以及 keep-alive 给你埋下的坑
为什么要用keep-alive呢, 因为这个会缓存dom模板, 下次再回到这个页面, 就可以利用这个已经渲染好的dom结构了, 如果数据不一样, 也会启用 virtualDoM 进行diff更新, 这 ...
- UI_APPEARANCE_SELECTOR 延伸
iOS后属性带UI_APPEARANCE_SELECTOR 可以统一设置全局作用 例如: 1>开关控件 @property(nullable, nonatomic, strong) UIColo ...
- 用PHP提取MYSQL二进制日志的SQL语句
上一篇说道,在从日志提取出SQL语句的时候,碰到了一句SQL跨了N行无法提取.后来在网上搜了两句shell: sed -n '/^INSERT /,/;/p' log.sql > log_ins ...
- Valid Number--LeetCode
class Solution { public: bool isNumber(string s) { if(s == " ") return false; ; ; while(s[ ...