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 ...
随机推荐
- JavaScript中forEach的用法相关
首先说下JavaScript的forEach的标准格式. 为数组中的每个元素执行指定操作. array1.forEach(callbackfn[, thisArg]) 参数 定义 array1 必需. ...
- 开启MSSQLServer跨服务器查询功能
首先在MSSQL客户端中进行如下图文操作配置 其次使用脚本进行操作配置 ---开启SQLServer 跨服务器查询功能 exec sp_configure 'show advanced options ...
- dev中 使用一些控件后，窗体屏蔽右键某些菜单
使用Ribbon时,ribbonControl1.ShowToolbarCustomizeItem=false; 使用LayoutControl时,layoutControl1.AllowCustom ...
- BestCoder Round #75 1003 - King's Order
国王演讲后士气大增,但此时战争还没有结束,国王时不时要下发命令. 由于国王的口吃并没有治愈,所以传令中可能出现:“让第三军-军-军,到前线去” 这样的命令.由于大洋国在军队中安插了间谍 , 战事紧急, ...
- 编写jquery插件
一.类级别($.extend) 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(o ...
- input submit button iOS webview browser diffrence
最近做项目用到了webview, 在浏览器中显示正常的input[type="submit"]按钮, 加载到webview中后css里的设置都失效了, webview里渲染的是最原 ...
- cURL模拟POST方式提交数据
curl_post.php文件: 1 $url = 'http://localhost/test/curl_post_deal.php'; 2 3 $post_data = array( 4 'use ...
- document.ready()的用法
1.Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).rea ...
- linux查看网卡吞吐量和网卡流量用自带命令，iptraf查看。
1 命令行直接输入:iptraf(如果没有,使用yum install iptraf安装) 2.打开进入选择ip镜像. 3. 选择监听测试的接口,所有接口. 4.开启监听状态日志,系统默认日志路径./ ...
- 几种常用单片机I/O口线的驱动能力
摘要: 详细分析了几种常见单片机的I/O口结构,并据此分析其驱动能力大小 在控制系统中,经常用单片机的I/O口驱动其他电路.几种常用单片机I/O口驱动能力在相关的资料中的说法是:GMS97C2051. ...