css3 伸缩百分比的调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 400px;height: 400px;
border: 1px solid red;
display: flex;/*设置为伸缩的父元素*/
}
.dv1{
width: 100px;height: 100px;/*宽度无效*/
background: red;
flex: 2;
}
.dv2{
width: 100px;height: 100px;/*宽度无效*/
background: blue;
flex: 2;
}
.dv3{
width: 100px;height: 100px;/*宽度无效*/
background: yellow;
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="dv1"></div>
<div class="dv2"></div>
<div class="dv3"></div>
</div>
</body>
</html>
主要是用:
display:flex;
flex:1;/*宽度无效*/
css3 伸缩百分比的调整的更多相关文章
- css3伸缩布局中justify-content详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- CSS3 伸缩布局盒模型记
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...
- 使用CSS3伸缩盒实现图片垂直居中
用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src=& ...
- css3的calc() css3的百分比减宽,减高,加,乘,除，适合用于后台的排版定位
css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...
- CSS3伸缩盒Flexible Box
这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...
- CSS3——伸缩布局及应用
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水 ...
- css3圆环百分比，菜单栏定位导航
前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...
- CSS3 伸缩布局盒模型
CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...
随机推荐
- maven在Idea建立工程,运行出现Server IPC version 9 cannot communicate with client version 4错误
问题的根源在于,工程当中maven dependencies里面的包,有个hadoop-core的包,版本太低,这样,程序里面所有引用到org.apache.hadoop的地方,都是低版本的,你用的是 ...
- H+ 关闭menuTab页面
//注:在contabs.js文件中 $(function () { }); 方法外 加入//注: data-name="' + menuName + '" 这句是加入的自定义属性 ...
- linux驱动工程面试必问知识点
linux内核原理面试必问(由易到难) 简单型 1:linux中内核空间及用户空间的区别?用户空间与内核通信方式有哪些? 2:linux中内存划分及如何使用?虚拟地址及物理地址的概念及彼此之间的转化, ...
- glide引出恶心的git submodule
起因 某一天一个同事,在看那个glide,然后我路过,看到他为何不编译“glide”项目(他说,编译中出错,反正都是看源码而已,所以就懒得搞,然后我出于“好心”,给他弄一下,我擦) 报错: Pro ...
- CentOS5.9 编译Emacs 24
从Emacs官方网站下载最新版解压后,执行 ./configure 得到错误信息: configure: error: The following required libraries were no ...
- Jquery on方法绑定事件后执行多次
每次绑定前先取消上次的绑定. $('#sub').unbind('click').click(function () { ... });
- python（61）：str 和 bytes 转换
str 和 bytes 转换 b = b"example" # str object s = "example" # str to bytes bytes(s, ...
- JS 的加密库简介
作为前端,数据提交到后台之前,重要的数据要进行加密一下,虽然已经有 https 等技术,但是增加一道前端的加密还是相对更安全的.虽然,前端的加密很容破解,但是有总比没有强. 尤其是涉及到用户名和密码, ...
- Hibernate获取数据java.lang.StackOverflowError
原因:因为在重写toString()方法时,把关联的属性也放入到toString方法中了,去掉就可以了. 如:重写的toString方法中不能有关联关系IDCard属性idCard public cl ...
- 匿名函数gc分析
测试一:使用member function创建action会产生gc,不管该函数是否访问外部变量: private System.Action memberAct = null; // gc 112B ...