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. MySQL优化 ----开篇

    今天,数据库的操作越来越成为整个应用的性能瓶颈,Mysql优化则是一个经常要谈的问题了. 谈起MySQL优化,咱们先简单谈一下Mysql: Mysql是最流行的关系型数据库管理系统,在WEB应用方面M ...

  2. [LuoguP1111]修复公路

    [LuoguP1111]修复公路 题目描述: A地区在地震过后,链接所有村庄的公路都损坏了,而导致无法通车,政府派人修复这些公路. 给出A地区的N村庄数和M公路数,并且对于每一个公路给出其链接的两个村 ...

  3. mysql 统一字符编码

    配置文件中的注释可以有中文,但是配置项中不能出现中文 #在mysql的解压目录下,新建my.ini,然后配置 #1. 在执行mysqld命令时,下列配置会生效,即mysql服务启动时生效 [mysql ...

  4. 188. Best Time to Buy and Sell Stock IV——LeetCode

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  5. JavaScript函数的方法

    在一个对象中绑定函数,称为这个对象的方法. 在JavaScript中,对象的定义是: var xiaoming = { name:'小明'; birth:1990; }; 但是,如果我们给xiaomi ...

  6. redis介绍及在购物车项目中的应用,用户认证

    1.redis 2.购物车的构建 api结构: models.py(创建完后自行添加数据) from django.db import models from django.contrib.conte ...

  7. python学习笔记--数据类型

    Life is short, You need Python! 霸气的口号! 今天我也开始学python了,毕竟不懂后端的前端不是好前端.之前有过‘世界上最好的语言’和JavaScript的学习经验. ...

  8. DHTML---HTML5

    1. HTML概述 网页是网站的表现层,各种编程语言(如Java)构成后台的逻辑,我们将后台逻辑做好然后通过页面表达.同时通过网页来与后台进行交互.而Html是我们做网页的基础,由浏览器来解析. 1. ...

  9. SpringMVC 导入导出Excel文件

    /**  * 下载Excel模板 创建一个新的文件用于下载,创建的文件放在缓存中  *   * @param request  * @param response  */ /*  * @Request ...

  10. Oracle块修改跟踪功能

    块修改跟踪功能是指使用二进制文件记录数据库中数据库更改的过程. 其目的是提高增量备份操作的性能,因为RMAN可以使用快修改跟踪文件找到上次执行备份操作后被修改的数据块.这可以节省大量时间,因为如果不这 ...