css3盒子布局-定义盒子布局的位置(box-ordinary-group)

来源：互联网发布：在外地网络被诽谤编辑：程序博客网时间：2024/06/08 03:54

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3定位布局-盒子布局的位置(box-ordinary-group)</title>
<style>

body{
margin:0;
padding:0;
text-align: center;
background-color: #d9bfe8;
}
.box{
margin:auto;
text-align:center;
width:988px;
display: box;
display: -moz-box;
display:-webkit-box;
-moz-orient: vertical;
-webkit-box-orient: vertical;
box-orient:vertical;
}
.box1{
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinary-group:2;
}
.box2{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinary-group:1;
}
.box3{
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinary-group:3;
}
</style>
</head>
<body>
<h1>box-ordinary-group:integer,参数值是一个自然数,表示设置子元素的位置编号,如果没有指定值,默认为1,序号相同的按照加载的顺序进行排列</h1>
<div class="box">
<div class="box1">布局1</div>
<div class="box2">布局2</div>
<div class="box3">布局3</div>
</div>
</body>
</html>

0 0