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. CF666E 【Forensic Examination】

    题目 每天一道\(SAM\)真是非常开心 一看就是广义\(SAM\)+线段树合并了 我们存好\(S\)串每一个前缀的终点,之后在\(parent\)树上倍增找到表示\(S[l,r]\)这个子串的节点, ...

  2. 【luogu P1402 酒店之王】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1402 菜 #include <queue> #include <cstdio> #i ...

  3. 移动端Vue回到顶部

    html: <div class="totop" id="totop" @click="Top" v-show="totop ...

  4. Ajax全接触(2)

    例子简介 1.查询员工信息,可以通过输入员工编号查询员工基本信息: 2.新建员工信息,包含员工姓名,员工编号,员工性别,员工职位: 实现: 1.纯html页面,用来实现员工查询和新建的页面: 2.ph ...

  5. HTML页面常用的编辑框

    public class FormInputUtil { /** * 获取表单中的InputText * * @param name * @param rs * @return */ public s ...

  6. spring入门(二) 使用注解代替xml配置

    1.导包(略) 2.applicationContext.xml如下: <?xml version="1.0" encoding="UTF-8"?> ...

  7. css3 RGBA 红色R+绿色G+蓝色B+Alpha通道

    语法: R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间 取值: <length>:Hue(色调).0(或360)表 ...

  8. 字符串拼接在Oracle和mysql中的用法

    oracle拼接字符串 1.使用  '||' 或者 concat(参数1,参数2) select 'aa' || 'bb' || 'cc' from dual; 结果:aabbcc select co ...

  9. 老刘的Linux小课堂开课了

    经过几个月的等待,刘遄老师的LINUX课堂终于开课了,从现在开始,我会在博客里将每一堂课的笔记记录下来,记录自己的每一步成长. 由于是第一次开课,老刘只是简单的介绍了LINUX相关的一些概念,比如开源 ...

  10. PHP 序列化与反序列化简单理解

    序列化就是把保存在内存中的各种对象状态,保存起来,在需要的时候还原出来. string serialize ,产生一个可以储存的表示 mixed unserialize 从已储存的表示中创建php值( ...