CSS3盒模型display:-webkit-box;的使用
<!DOCTYPE html>
<html><meta charset="utf-8" />
<style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
margin: 10px;
font-size: 40px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
.w200 {width: 200px}
.flex1 {display:block;-webkit-box-flex: 3}
.flex2 {display:block;-webkit-box-flex: 1}
</style>
<div class="wrap">
<!-- <div class="child w200">200px</div>
<div class="child flex1">比例1</div>
<div class="child flex2">比例2</div> -->
<input type="text" class="child flex1" value="比例1">
<input type="text" class="child flex2" value="比例2">
</div>
</html>
Ps:例如上面的child要求是块（block）元素才有效。
CSS3盒模型display:-webkit-box;的使用的更多相关文章
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- CSS3盒模型display:box;box-flex:3;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- CSS3盒模型display:box简述
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. box-f ...
- [转]CSS3盒模型display:box详解
时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...
- CSS3盒模型display初探（display:box/display:flex）
可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...
- css3盒模型学习--利用box自适应布局
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典 的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- 移动web开发实践-css3（1）盒模型display:-webkit-box;的使用
提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...
- CSS3盒模型温故
CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...
随机推荐
- Oracle存储过程的一点使用总结
[博客文章背景]博客开通已经1.2年了,一直碍于技术能力,不敢献丑.想起1年前在一个数据处理相关项目结束后,代金排主管让我做一个数据库开发总结文档和一个Toad.PL/SQL Developer工具的 ...
- 20160126--springaop
package com.hanqi; public interface IJiSuanQi { public int jia(int a , int b); public int jian(int a ...
- Vim 扩展工具 vim-ide (转)
通过简单的配置文件将 vim 打造成专业 ide,支持 mac linux cygwin.看过数篇 vim 配置文件,必要时去定制vim 的插件,将 vim 的 ide 用户体验尽量做到极致. 使用范 ...
- SQL高级查询的练习题
Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,Tname) 教师表 问题 ...
- Cordova了解
概述 Cordova让我们可以使用HTML.JS以及CSS开发跨平台App的公共部分(整个App就是一个WebView或者或者嵌入到本地组件中),与原生API的交互通过Cordova插件实现. 安装配 ...
- eclipse 各种版本spring插件安装
一.安装之前先得知道怎么下载吧: 一般网上找到的资料是到这里就GG了的 --> http://spring.io/tools/sts/all 很明显这点版本是不够我们需要的,假如我们的eclip ...
- Android Canvas不能换行，或者不识别\n,\r\n的解决方案
在使用Canvas绘制文本的时候,如果要绘制的字符串含有\r\n,\n换行的时候,会识别不出来,当成空格绘制出来. 解决方案: 1.使用StaticLayout来实现,具体代码如下: TextPain ...
- js数组的操作<转>
转自 http://blog.csdn.net/xcxinghai/article/details/13502583 PS(个人理解): 1) 数组项的数据类型可以是混合多样的,同时可以含string ...
- python运维开发(五)----模块、生成器
内容目录 双层装饰器 字符串格式化 生成器和迭代器 递归 模块 双层装饰器 需求场景介绍: 现有用户登录系统,普通用户能查看自己相关信息的权限,管理员用户能查看所有用户的权限,可以做两个装饰器来实现需 ...
- CSS自学笔记（15）:CSS3多列布局
在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性 浏览器支持 column ...