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项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...
随机推荐
- Mac 解压zip文件错误：无法将"*.zip"解压缩到"" （错误 1-操作不被允许）
错误提示: 无法将"*.zip"解压缩到"" (错误 1-操作不被允许)或者 解压缩失败 英文提示: "Unable to unarchive int ...
- C#中准确跟踪错误异常所在的文件位置方法
准确跟踪错误异常所在的文件位置方法是在发布改文件所在的DLL时候,把对应的pdb文件也一同发布. pdb文件是:PDB全称Program Database,不知道中文翻译叫什么.相信使用过VS的人对于 ...
- org.apache.xerces.dom.ElementNSImpl.setUserData(Ljava/lang/String;Ljava/lang
HTTP Status 500 - Handler processing failed; nested exception is java.lang.AbstractMethodError: org. ...
- C++ 如何决定字面常量类型
C++ 是如何决定字面常量的类型的? #include <iostream> #include <cmath> int main() { using namespace std ...
- 看雪CTF第十四题
from z3 import * dest=[] s = Solver() data = [, , , , , , , , , , , , , , , , , , , , , , , , , , , ...
- 以太坊客户端Geth命令用法-参数详解【转载】
原文链接:http://www.cnblogs.com/tinyxiong/p/7918706.html Geth在以太坊智能合约开发中最常用的工具(必备开发工具),一个多用途的命令行工具.熟悉Get ...
- 关于Cocos的内存管理机制引发一些异常的解决方案
错误:引发了异常: 读取访问权限冲突. this 是 0xDDDDDDDD.或者hero是 0xDDDDDDDD.hero是在GameController里创建的对象 这个的意思是this所指向的内存 ...
- 通用Mapper新特性：ExampleBuilder 2017年12月18日
package tk.mybatis.mapper.test.example; import org.apache.ibatis.session.SqlSession; import org.juni ...
- badgeview
https://github.com/AlexLiuSheng/BadgeView include: compile 'com.allenliu.badgeview:library:1.1.1'(ne ...
- 高并发分布式系统中生成全局唯一（订单号）Id
1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(DateTime),这样我们将时间信息与GUID组合 ...