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. PAT1067. Sort with Swap(0, *) (25) 并查集

    PAT1067. Sort with Swap(0, *) (25) 并查集 题目大意 给定一个序列, 只能进行一种操作: 任一元素与 0 交换位置, 问最少需要多少次交换. 思路 最优解就是每次 0 ...

  2. PAT 1063. Set Similarity

    1063. Set Similarity 题目大意 给定 n 个集合, k 个询问, 求任意两个集合的并集和合集. 思路 一道裸的考察 STL 中 set 的题, 我居然还用 hash 错过一遍, 用 ...

  3. LeetCode8.字符串转换整数(atoi) JavaScript

    请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该符号与之 ...

  4. 怎么得到scrollTop

    我们学习一个事件 :  页面滚动效果 window.onscroll = function() { 页面滚动语句  } 谷歌浏览器 和没有声明 DTD  <DOCTYPE     > : ...

  5. Java虚拟机垃圾回收(三): 7种垃圾收集器(转载)

    1.垃圾收集器概述 垃圾收集器是垃圾回收算法(标记-清除算法.复制算法.标记-整理算法.火车算法)的具体实现,不同商家.不同版本的JVM所提供的垃圾收集器可能会有很在差别,本文主要介绍HotSpot虚 ...

  6. 几个常用的 Git 高级命令

    Git 是一款开源优秀的版本管理工具,它最初由 Linus Torvalds 等人开发,用于管理 Linux Kernel 的版本研发.相关的书籍和教程网上琳琅满目,它们多数都详细的介绍其基本的使用和 ...

  7. 浅谈Java 8的新特性和使用场景

    一.default方法:   通过default方法,可以在接口(Interface interface_name)中添加实例化方法:   代码如下: public interface TestDef ...

  8. 清除.svn文件

    清除以.svn结尾的文件: 新建一文本,然后复制以下代码进去,然后保存成clean.bat即可,它会把当前文件夹以及以下的所有匹配文件都给删除了 @echo on color 2f mode con: ...

  9. 更换eclipse字体

    eclipse自带的字体非常不好,看的我难受,可能是使用myeclipse习惯了,怎么调节都不好使 最后决定下载一个字体包吧! 字体下载地址如下:http://files.cnblogs.com/ic ...

  10. 手动创建简单webpack项目及React使用

    一.创建基本的webpack4.x项目 1.运行 npm init -y 快速初始化项目 2.在项目根目录创建src的源代码目录和dist产品目录 3.在src目录下创建 index.html 4.使 ...