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 ...
随机推荐
- 数字游戏II
题面好难找:嘟嘟嘟 贪心 + dp. 首先要按bi的降序排序,让每一次减少大的数尽量靠前.为啥咧?于是我们就需要证明:令sum = a1 - (1 - 1) * b1 + a2 - (2 - 1) * ...
- activeMQ消息队列的使用
ActiveMQ解决问题: 1.解决服务之间的耦合 2.增加系统并发处理量. 它使用的是标准生产者和消费者模型.有两种数据结构:Queue/Topic 1.Queue队列,生产者生产一个消息,只能由 ...
- Visual Studio IDE环境下利用模板创建和手动配置CUDA项目教程
目前版本的cuda是很方便的,它的一个安装里面包括了Toolkit`SDK`document`Nsight等等,而不用你自己去挨个安装,这样也避免了版本的不同步问题. 1 cuda5.5的下载地址,官 ...
- linux c做服务端使用多线程接收图片并且将图片写入数据库
#include<sys/socket.h> #include<sys/types.h> #include<sys/stat.h>//包含文件的全部结构,属性 #i ...
- o'Reill的SVG精髓(第二版)学习笔记——第十二章
第十二章 SVG动画 12.1动画基础 SVG的动画特性基于万维网联盟的“同步多媒体集成语言”(SMIL)规范(http://www.w3.org/TR/SMIL3). 在这个动画系统中,我们可以指定 ...
- js点赞效果图
点赞时点赞图标会发生变化. html部分: <img src="img/icon_thumb_up.png" id="imgs1" style=" ...
- LeetCode17.电话号码的字母组合 JavaScript
给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例: 输入:"23" 输出:[&quo ...
- 与JSON相关的问题
1.JSON.stringify 与 JSON.parse 相关的问题 JSON.stringify 把字符串转化为字符串,JSON.parse把字符串转化为JSON格式 会出现的问题Unexpect ...
- Openresty最佳案例 | 汇总
转载请标明出处: http://blog.csdn.net/forezp/article/details/78616856 本文出自方志朋的博客 目录 Openresty最佳案例 | 第1篇:Ngin ...
- UIlable上下居中
- (void)setView{ self.chooseImg = [[UIImageView alloc] initWithFrame:CGRectMake(TO_LEFT_D, (ROW_HEIG ...