码迷,mamicode.com
首页 > Web开发 > 详细

css-布局-砖墙布局

时间:2020-12-21 12:13:04      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:htm   body   count   ack   isp   ott   splay   display   play   

```html

1
2
3
4
5
6
7
8
9
10
11

```

 

```html
<body>
<style>
#container {
width: 100%;
max-width: 700px;
margin: 2em auto;
}

.cols {
-moz-column-count: 3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count: 3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}

.box {
margin-bottom: 20px;
}

.box.one {
height: 200px;
background-color: #d77575;
}

.box.two {
height: 300px;
background-color: #dcbc4c;
}

.box.three {
background-color: #a3ca3b;
height: 400px;
}

.box.four {
background-color: #3daee3;
height: 500px;
}

.box.five {
background-color: #bb8ed8;
height: 600px;
}

.box.six {
background-color: #baafb1;
height: 200px;
}
</style>
<div id="container" class="cols">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box one">3</div>
<div class="box three">4</div>
<div class="box two">5</div>
<div class="box five">6</div>
<div class="box one">7</div>
<div class="box two">8</div>
<div class="box six">9</div>
<div class="box three">10</div>
<div class="box two">11</div>
</div>
</body>
```

css-布局-砖墙布局

标签:htm   body   count   ack   isp   ott   splay   display   play   

原文地址:https://www.cnblogs.com/zc-lee/p/14146587.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!