dispaly:-webkit-box 布局中的坑
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 布局中的坑的更多相关文章
- box布局中文字溢出问题
如果不设置-webkit-box-flex:1:会溢出,设置width也行,在电脑上模拟可能会有问题,手机上没问题
- Box布局
import sys from PyQt4 import QtCore, QtGui class MainWindow(QtGui.QWidget): def __init__(self, paren ...
- PyQt4 Box布局
使用布局类别方式的布局管理器比绝对方式的布局管理器更加灵活实用.它是窗口部件的首选布局管理方式.最基本的布局类别是QHBoxLayout和QVBoxLayout布局管理方式,分别将窗口部件水平和垂直排 ...
- C-Flex 与 box布局教程
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html -阮一峰老师 http://www.w3cplus.com/css3/flexbox- ...
- 在网页布局中合理使用inline formating context(IFC)
引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.
- CSS弹性盒模型flex在布局中的应用
× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...
- 响应式布局中的CSS相对量
一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...
- CSS布局中最小高度的妙用
CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...
- 在布局中使用android.support.v4.app.Fragment的注意事项
1.Activity必须继承android.support.v4.app.FragmentActivity 2.fragment标签的name属性必须是完全限定包名,如下: <LinearLay ...
随机推荐
- js面向对象 继承
1.类的声明 2.生成实例 3.如何实现继承 4.继承的几种方式 1.类的声明有哪些方式 <script type="text/javascript"> //类的声明 ...
- ettercap_缺少组件问题
原因:缺少WinPcap组件解决:安装即可
- java读取资源文件(Properties)
四步: java代码 //new一个读取配置文件 Properties properties=new Properties(); //获取文件路径 String path=request.getSer ...
- intellig idea中jsp或html数据没有自动保存和更换字体
主题一:保存数据jsp intellig idea是自动保存数据的,看到没有保存 解决方案: 成功解决 主题二:更换字体: 或者快捷键Ctel+Alt+s 成功解决
- lucene&solr学习——分词器
下图是语汇单元的生成过程: 从一个Reader字符流开始,创建基于Reader的Tokenizer分词器,经过三个TokenFilter生成语汇单元Tokens. 要看分词器的分析效果,只需要看Tok ...
- java中String、包装类、枚举类的引用传递
一般情况下,我们认为Java中了除了八种基本数据类型,其他都是对象,进行引用传递: 但是:String.包装类.枚举类作为参数传递后发现,没有达到引用传递的效果,很多人认为它是值传递! 首先,对象肯定 ...
- ECMAScript6
ECMAScript6介绍 # ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现 # 有利于保证这门语言的开放性和中立性. # 标准在每年的 6 月份正 ...
- 字段中有空的时候 进行逻辑运算,mysql 与 oracle 处理函数IFNULL() 与 nvl() ,选取NULL 值 。
mySQL数据库: SELECT id_p,IFNULL(math,0)+IFNULL(english,0) 总分 from mytest_brian1 Oracle 数据库: select id_ ...
- oracle-02 用户管理
一.创建用户概述:在oracle中要创建一个新的用户使用create user语句,一般是具有dba(数据库管理员)的权限才能使用.create user 用户名 identified by 密码; ...
- c# 说说开发通用通信库,尤其是分布式服务的通信
来,牛皮需要吹起,IT行业需要自娱自乐.开篇吹牛..... 现在我们通信真是各种各样,各种组件,但是就我的看法,功能越完善,封装越完善,牺牲的性能可能就越大,代码量就越大. 当然这不能阻挡IT大军的脚 ...