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. NYOJ298 点的变换 【矩阵乘法经典】

    任意门:http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=298 点的变换 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 ...

  2. GroundPlaneEstimator.cpp解读

    GroundPlaneEstimator域下的compute函数,就相当于整个cpp的主函数,也体现了整个调用过程,先执行compute_v_disparity_data,再compute_v_dis ...

  3. Mybatis自动生成的BO对象继承公共父类(BO中过滤掉公共属性)

    使用mybatis的代码生成工具:mybatis-generator,如果自动生成的BO都有公共的属性,则可以指定这些BO继承父类(父类中定义公共属性) 1.定义父类 注意:属性public,不要使用 ...

  4. 课时92.CSS元素显示模式转换(掌握)

    我们之前学习的显示模式都可以不用记忆,因为这节课我们要学习转换,我们可以任意来进行一个转换的,上面这些东西有一个了解就行了.所有的标签都有一个属性叫做display,display的中文含义就是显示的 ...

  5. 轻量ORM-SqlRepoEx (四)INSERT、UPDATE、DELETE 语句

    *本文中所用类声明见上一篇博文<轻量ORM-SqlRepoEx (三)Select语句>中Customers类 一.增加记录 1.工厂一个实例仓储 var repository = Rep ...

  6. Vue--- Vue(Pubsub + Ajax) 数据交互

    案例知识点 兄弟组件儿的通信     使用了Pubsub    订阅与发布 ajax数据请求    获取前   获取中   获取后   获取为空    获取异常 获取成功后显示数据给到  原先定义号的 ...

  7. 【原创】展开二层嵌套列表(或pd.Series)的几种方法效率对比

    转载请注明出处:https://www.cnblogs.com/oceanicstar/p/10248763.html ★二层嵌套列表(或以列表为元素的pd.Series)有以下几种展开方式 (1)列 ...

  8. php接口数据加密、解密、验证签名【转】

    <?php/** * 数据加密,解密,验证签名 * @edit http://www.lai18.com * @date 2015-07-08 **///header('Content-Type ...

  9. 【解决】MongoDB 线上业务处理,数据去重脚本实现

    mongo客户端工具下载  https://robomongo.org/download   线上业务,k线 展示出现问题,相同时间戳的数据多次插入导致数据不真实,后经排查发现是每次都是写的四条数据, ...

  10. PyCharm+QT Designer整合

    CMD下使用pip安装PyQt4或者PYQT5 这里要注意,你下载的PYQT5不包含QT designer 还要:pip3 install PyQt5-tools,好像Pyqt5中将designer分 ...