<!DOCTYPE html>

<html>

<head>

<style>

.box{ width: 300px; height: 100px; background-color: red; display: -webkit-box; display: -moz-box; display: box;}

.siblings-left{ -webkit-box-flex: ; -moz-box-flex: ; box-flex: ; background-color: green;}

.siblings-right{ -webkit-box-flex: ; -moz-box-flex: ; box-flex: ; background-color: blue;}

</style>

</head>

<body>

<div class="box">

    <div class="siblings-left"></div>

    <div class="siblings-right"></div>

</div>

</body>

</html>

均分，高版本可代替float

IE高低版本据不支持

box-flex 分割的更多相关文章

  1. box flex 弹性盒模型（转载）

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  2. Flex 布局的教程

    前言:以前也经常用flex布局,但是最近看到别人使用的时候,发觉以前自己还是不够理解这个,重新看了一遍http://www.ruanyifeng.com/blog/2015/07/flex-gramm ...

  3. flex布局实现elment容器布局

    一.flex布局是什么 flex布局,意为"弹性布局",是一种响应式的布局方法 采用 Flex 布局的元素,称为 Flex 容器,它的所有子元素自动成为容器成员. 先放上一个ele ...

  4. css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记

    最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...

  5. Ext.js高级组件

    第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...

  6. 5种样式实现div容器中三图摆放实例对比说明

    代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...

  7. 性能是全新的 SEO

    作为一个前端project师,那不只就是公开地处理那些美丽的html5, css3 和javascript特效.小而重要的一部分工作就是要让项目朝着代码稳定和代码标准方向进展.设计.信息结构以及后台限 ...

  8. 两个input均分自适应

    最近项目中,做到了表格类似的表单 左边是标题,右边是输入框,由于种种和项目相关原因,我们采取了div布局 div label input*2div里面有1个input,有的时候,遇到日期,会有2个in ...

  9. 移动端base.css

    html { color: #333; /*规定主色调,依据业务场景(非必须)*/ background: #F6F6F6; /*规定主背景,依据业务场景(非必须)*/ overflow-y: aut ...

  10. 移动端超级好用的reset.css（只做参考哦具体以你们实际项目需求为准）

    html { color: #333; /*规定主色调,依据业务场景(非必须)*/ background: #F6F6F6; /*规定主背景,依据业务场景(非必须)*/ overflow-y: aut ...

随机推荐

  1. 移动wabAPP 开发 viewport 注意事项

    我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中: <meta name="viewport" content="widt ...

  2. 影响pogo pin连接器使用寿命的因素

    精细化.安装简易化及使用寿命长是现在数码电子产品的趋势发展,pogo pin连接器体积小而且弹簧伸缩式设计,可以更好的缩小数码电子产品的尺寸并且连接安装更加的简单方便,因此pogo pin连接器得到了 ...

  3. 已授予账号 "以服务方式登录"的权限

    已授予账号.\Cliff "以服务方式登录"的权限 --------------------------------------------------- 进入服务管理器(Serv ...

  4. Qt之高级网络操作（HTTP/FTP快速上手）Qt之QHttpPart和QHttpMultiPart

    http://blog.csdn.net/u011012932/article/details/52535755 http://blog.csdn.net/u011012932/article/det ...

  5. ArcGIS Runtime for Android开发教程V2.0（2）开发环境配置

    原文地址: ArcGIS Runtime for Android开发教程V2.0(2)开发环境配置 - ArcGIS_Mobile的专栏 - 博客频道 - CSDN.NET http://blog.c ...

  6. 分布式java应用

    大型应用,通常会拆分为多个子系统来实现.       对Java来说,这些子系统可能部署在同一台机器的多个不同的JVM中,也可能部署在不同的机器上,但这些子系统又不是完全独立的,要相互通信来共同实现业 ...

  7. android 电容屏（二）：驱动调试之基本概念篇

    平台信息: 内核:linux3.4.39系统:android4.4 平台:S5P4418(cortex a9) 作者:瘋耔(欢迎转载,请注明作者) 欢迎指正错误,共同学习.共同进步!! 关注博主新浪博 ...

  8. 请问JDBC中IN语句怎么构建

    用PreparedStatement 传多参数时,如果参数个数不确定,还想使用?参数避免sql注入,只有一个办法 根据传递的参数个数,拼接sql语句为 SELECT * FROM TABLE_A WH ...

  9. UML中常见关系详解（泛化、实现、依赖、关联、组合、聚合）

    UML中类与类,已经类与接口,接口与接口的关系有:泛化(generalization),关联(association),依赖(dependency),实现(realization)这几种.   泛化( ...

  10. OK335xS can't reset with reboot

    /*********************************************************************** * OK335xS can't reset * 说明: ...