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 ...
随机推荐
- 从头开始－07.Foundation框架常用结构体
一.Foundation框架常用结构体NSRange\CGRange.NSPoint\CGPoint.NSSize\CGSize. NSRect\CGRect 的使用 1. 基本使用: //NSRa ...
- SharePoint 2013 代码实现自定义的站点模版创建Site Collection
先需要将自定义的站点模版从网站集转移到Farm中. 找一个自己已经完成配置及设计的网站,在网站设置里面选择另存为模版.要注意的是不是所有的站点类型都有另存为模版的功能. 存完之后可在解决方案库的界面里 ...
- 多线程12_张孝祥 java5读写锁技术的妙用
package locks; import java.util.Random; import java.util.concurrent.locks.ReentrantReadWriteLock; /* ...
- java多线程的实现的两种方法
通过继承Thread类实现 多线程- public class Hello{ public static void main(String args[]){ MyThread tr1 = new My ...
- 音量强度转分贝db
//LPDIRECTSOUNDBUFFER如何设置声音大小?> //取值范围是0 ~ -10000, 0最大,-10000最小,单位是分贝 //0-100音量转换成分贝 double decib ...
- JSP（一）
开宗明义:JSP本质上就是一个Servlet scriplet JSP 变量和函数的声明 局部变量 <% int a = 3;> 全局变量和函数 <%! int a = 3;> ...
- 关于http状态码204理解
HTTP的状态码有很多种,主要有1xx(临时响应).2xx(成功).3xx(已重定向).4xx(请求错误)以及5xx(服务器错误)五个大类,每个大类还对应一些具体的分类.平时我们接触比较多的是200. ...
- 一分钟了解PHP
PHP5编辑 PHP5在长时间的开发及多个预发布版本后,2004年7月13日,PHP5.0发布.该版本以Zend引擎Ⅱ为引擎,并且加入了新功能如PHP Data Objects(PDO).PHP5.0 ...
- 点击显示子菜单，离开隐藏子菜单（onmouseout下包含a标签的js解决方法）
<div class="menu"> <a href="javascript:void(0);" id="a_all&quo ...
- 好的组件，无须太复杂 – KISSY Slide 组件简介
KISSY Slide 组件首页:http://gallery.kissyui.com/slide/1.1/guide/index.html V1.1 New Featurs Slide是一个幻灯切换 ...