dispaly:-webkit-box 具体用法 这里大家可以网上查,

这里说下里面的坑

里面的子对象设置-webkit-box-flex: 1 -webkit-box-flex: 2 时;一般两个子元素宽度并不是1比2

所以这里建议设置成传统的百分比的形式

-webkit-box-flex: 1 用来做宽度自适应

比如一个左边200px宽 右边自适应,可以这

.parent{

  dispaly:-webkit-box ;

}

.left{

  dispaly:-webkit-box ;

}

.right{

  -webkit-box-flex: 1 ;

}

<div class="parent">

  <div class="left"></div><div class="right"></div>

</div>

dispaly:-webkit-box 布局中的坑的更多相关文章

  1. box布局中文字溢出问题

    如果不设置-webkit-box-flex:1:会溢出,设置width也行,在电脑上模拟可能会有问题,手机上没问题

  2. Box布局

    import sys from PyQt4 import QtCore, QtGui class MainWindow(QtGui.QWidget): def __init__(self, paren ...

  3. PyQt4 Box布局

    使用布局类别方式的布局管理器比绝对方式的布局管理器更加灵活实用.它是窗口部件的首选布局管理方式.最基本的布局类别是QHBoxLayout和QVBoxLayout布局管理方式,分别将窗口部件水平和垂直排 ...

  4. C-Flex 与 box布局教程

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html -阮一峰老师 http://www.w3cplus.com/css3/flexbox- ...

  5. 在网页布局中合理使用inline formating context(IFC)

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  6. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  7. 响应式布局中的CSS相对量

    一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...

  8. CSS布局中最小高度的妙用

    CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...

  9. 在布局中使用android.support.v4.app.Fragment的注意事项

    1.Activity必须继承android.support.v4.app.FragmentActivity 2.fragment标签的name属性必须是完全限定包名,如下: <LinearLay ...

随机推荐

  1. WIN7系统 64位出现 Net Framework 数据提供程序要求 Microsoft Data Access Components(MDAC).

    WIN7系统 64位出现  Net Framework 数据提供程序要求 Microsoft Data Access Components(MDAC).请安装 Microsoft Data Acces ...

  2. 时空隧道FQ

    给你推荐一款海外网站加速工具,为科技工作者.海外归国人员.企业团队.外贸工作者提供海外上网服务,永久免费. 国外网址:https://chrome.google.com/webstore/detail ...

  3. 在Win7虚拟机下搭建Hadoop2.6.0伪分布式环境

    近几年大数据越来越火热.由于工作需要以及个人兴趣,最近开始学习大数据相关技术.学习过程中的一些经验教训希望能通过博文沉淀下来,与网友分享讨论,作为个人备忘. 第一篇,在win7虚拟机下搭建hadoop ...

  4. dual表详解

    dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下: 1.查看当前用户 SQL> select user from ...

  5. iOS之蓝牙开发—CoreBluetooth详解

    CoreBluetooth的API是基于BLE4.0的标准的.这个框架涵盖了BLE标准的所有细节.仅仅只有新的iOS设备和Mac是和BLE标准兼容.在CoreBluetooth框架中,有两个主要的角色 ...

  6. 记录JavaScript的util.js类库

    工作中用到的, 不断做为积累, 以后能用到. 也感谢前辈们.  定义Util对象 var MyUtil = new Object(); 从url中获取参数 //从url中获取参数 function G ...

  7. Struts2进阶学习3

    Struts2进阶学习3 OGNL表达式与Struts2的整合 核心配置文件与页面 <?xml version="1.0" encoding="UTF-8" ...

  8. 【bind服务简单发布及优化部署】

    主DNS 1:安装bind服务包 2:vim  /etc/named.conf区域解析控制文件 3:vim /etc/named.rfc1912.zones解析方向文件 4:vim var/named ...

  9. sqlite3 简单实用方法

    打开数据库:sqlite3.exe test.db 显示所有表: .tables 退出 sqlite3:.quit 还有个问题,已经打开一个数据库文件了. 不知道如何在不退出命令行的情况下,更换另一个 ...

  10. nginx配置SSL证书/强制跳转与非强制跳转

    支持强制跳转HTTPS server { listen 80; server_name www.test.com; rewrite ^(.*)$ https://${server_name}$1 pe ...