css3流动布局
-webkit-box-ordinal-group: 2;1。。。布局优先显示
display: -webkit-box;盒子
-webkit-box-orient:horizontal;显示方式
-webkit-box-flex: 1;盒子多少显示,数字显示的大小
<html>
<head>
<title></title>
<style type="text/css">
body{
display: -webkit-box;
-webkit-box-orient:horizontal;
width: 100%;
}
#box1{
background-color: red;
width: 100px;
-webkit-box-ordinal-group: 2;
}
#box2{
background-color: black;
-webkit-box-flex: 1;
-webkit-box-ordinal-group: 2;
}
</style>
</head>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
</html>
css3流动布局的更多相关文章
- CSS3 Flex布局整理(二)-容器属性
一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...
- CSS3 & 页面布局
相关链接 视频链接: CSS3 & 页面布局 CSS3与页面布局学习总结(一) CSS3与页面布局学习总结(二) CSS3与页面布局学习总结(三) CSS3与页面布局学习总结(四) CSS3与 ...
- 12个学习 CSS3 网站布局设计的优秀案例
网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...
- Bootstrap页面布局3 - BS布局以及流动布局
1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...
- [转]使用CSS3 Grid布局实现内容优先
使用CSS3 Grid布局实现内容优先 http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...
- CSS3 伸缩布局盒模型记
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...
- 转:CSS3 Flexbox 布局介绍
转:CSS3 Flexbox 布局介绍 Flexbox是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布 ...
- 【repost】CSS3弹性布局
本文导读:在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理.使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据 ...
- CSS3 Flex布局整理(三)-项目属性
一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...
随机推荐
- vue v-show绑定
在Vue中使用v-show指令来选择性的显示内容.它的属性值可以是布尔值.属性名称以及函数名称.如果使用函数来控制的话,无论函数内容如何运算判断,最终返回布尔值true或者false就可以了 < ...
- 【JS】中ajax的URL中包含中文,后台接收乱码
[问题]ajax提交get请求,url中参数包含中文,后台接收到显示乱码. [解决方案]前台: function getSiteInfoByName(siteName){ var res; $.aja ...
- js中去除字符串中所有的html标签
对于获取了一大堆字符串但是又不想要里面的html标签怎么办? 特别是像博客园这个富文本框中,可以带样式的,取出来的文章内容也是带样式的. 但是在某些地方只要显示文本不想显示其他标签,只好这样做. &l ...
- IE11总是有缓存的问题
F12,里面选择网络,始终从服务器刷新..
- bat 获取拖放文件路径或名称
获取路径: @echo offset path=%~dp1echo %path%pause 获取路径及名称: @echo offset path=%~dp1%~nx1echo %path%pause
- 步步为营-76-用户登录(Session+Cookie)
说明:cookie是保存在浏览器的.Session是存储在服务器的 1 同样UI页面还是web前端提供 1.1 首先,经过验证码校验:将系统产生的验证码放入到Session中,然后取Session值注 ...
- Java利用POI读取Excel
官网直接下载POI http://poi.apache.org/ package com.CommonUtil; import java.io.File; import java.io.FileIn ...
- Eciplce ALT+/失效的解决方法
最近公司电脑上的Eclipse没有了自动提示功能,也不是全部不提示,大多数情况下按下“alt+/”键还会产生提示,但是当我在java项目中邪main方法和syso的时候,“alt+/”则会失效,今天在 ...
- Mom and Dad
Mom Poodwaddle Life clock Dad Poodwaddlw Life clock Happiness is the meaning and the purpose of lif ...
- ElasticSearch(五) Elasticsearch-jdbc实现MySQL同步到ElasticSearch
https://www.cnblogs.com/wt645631686/p/8274722.html