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 ...
随机推荐
- SQL Server Reporting Services (SQLEXPRESS) 服务占用80端口
win7, 好多时候,看到system进程占用了80端口,这个是系统进程,不能直接结束.我们不知道这个进程的哪个服务占用了80端口,这里记录其中一个服务"SQL Server Reporti ...
- EF项目中应用出现问题？？？
最近用EF做了个项目发现很多不便利的地方. 具体如下. 1,我是通过edmx 建模,然后通过模型生成数据库. 虽然数据库已经创建成功但是问题来了,我在加字段,和标的时候再次生成时domeo.edmx. ...
- Silverlight学习笔记之页面跳转
在进行项目开发的时候,经常遇到页面之间的跳转,包括silverlight之间以及silverlight和html之间的跳转. silverlight之间的页面跳转包含两点: 1.主窗体和子窗体 用户新 ...
- js 正则表达式验证 整理
1.验证首字符是英文字母: var str="123"; var reg=/^[a-zA-Z]/; if(!reg.test(str)){ alert(str+"应以字母 ...
- iOS self和super的区别
self和super的区别 #import <Foundation/Foundation.h> 首先先写两个类 fist和two,two继承fist类 @interface First:N ...
- NSURLSessionDownloadTask 下载文件
-(void)RequestdataUI:(NSString*)ImageURL imageName:(NSString*)imageName{ NSURL *url = [NSURL URLWith ...
- Django模板-在视图中使用模板
之前我们已经有了自己的视图mysite.views.py中,应该是这样子的 from django.http import HttpResponse import datetime def curre ...
- linux里的bootproto的none,static,dhcp有什么区别
这个是网络配置参数:BOOTPROTO=static 静态IP BOOTPROTO=dhcp 动态IP BOOTPROTO=none 无(不指定)通常情况下是dhcp或者static,通过指定方式 ...
- python-多线程（原理篇）
多线程的基本概念 语言学习总是绕不过一些东西,例如多进程和多线程,最近越来越发现,上来看几个实例练习一下过几天就不知其所以然了.所以还是先看看原理,在看实例练习吧! 线程的概念 概念:线程是进程中执行 ...
- Android 仿微信滑动删除
做这个功能主要是项目需要:找了很多资料但是效果都不理想,后来就自己研究写了一个,拿出来共享给大家,贴上代码大家慢慢看看,还是比较容易懂的. 主要代码: package com.zbq.widget; ...