css3流动布局
2015-07-09 15:25
495 查看
-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>
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 如何去掉IE文本框后的那个X css代码
- Button改变样式
- CSS3 经典教程系列：CSS3 线性渐变（linear-gradient）
- 在CSS中，BOX的Padding属性的数值赋予顺序为
- CSS中id和class的区别
- wpf Combobox没有黑三角，鼠标移上去改变样式
- Web前端从入门到精通-5 css简介——css概述和选择器
- CSS word-spacing 属性
- css3选择器
- css3-制作渐变
- css3-变形transforms
- css3-过渡transtition
- css自定义字体（图标）-有些图标不要在P图了
- css3实现网页平滑过渡效果
- 纯CSS绘制mac代码
- css3使用transform属性制作js弹性运动
- 纯CSS打造银色MacBook Air（完整版）
- magento 手机自适应 瀑布流 混合样式
- css3 webkit-box的用法
- css杂记