7. 多列
2019-09-29 本文已影响0人
瑟闻风倾
1. 多列的效果
说明：在CSS3中，可以创建多列来对文本或者区域进行布局。
| 属性 | 描述 |
|---|---|
| column-count | 分列的数量 |
| column-gap | 每列的间隔距离 |
| column-rule | 每列间隔的线及线的颜色 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画-多列</title>
<style>
.div1{
column-count: 4;
-webkit-column-count: 4;
column-gap: 50px;
-webkit-column-gap: 50px;
column-rule: 5px outset #FF8C00;
-webkit-column-rule: 5px outset #FF8C00;
}
</style>
</head>
<body>
<div class="div1">
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
如果每只狗，都要注定的一位主人，那么他的运气真的很好，不是你选中了它，而是它在万千人群中，选中了你。
</div>
</body>
</html>
多列效果.png
2. 使用多列实现瀑布流效果
瀑布流效果：宽度相同，高度不同的多个图片排布方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用多列实现瀑布流效果</title>
<style>
.container{
column-width: 250px;
column-gap: 5px;
}
.container div{
width: 250px;
margin: 5px 0;
}
img{
width: 250px;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<div><img src="../img/1.jpg"><p>标签1</p></div>
<div><img src="../img/2.PNG"><p>标签2</p></div>
<div><img src="../img/3.png"><p>标签3</p></div>
<div><img src="../img/4.png"><p>标签4</p></div>
<div><img src="../img/5.png"><p>标签5</p></div>
<div><img src="../img/6.png"><p>标签6</p></div>
<div><img src="../img/7.png"><p>标签7</p></div>
<div><img src="../img/8.png"><p>标签8</p></div>
<div><img src="../img/9.png"><p>标签9</p></div>
<div><img src="../img/10.PNG"><p>标签10</p></div>
<div><img src="../img/11.png"><p>标签11</p></div>
<div><img src="../img/12.png"><p>标签12</p></div>
<div><img src="../img/13.PNG"><p>标签13</p></div>
<div><img src="../img/bl.PNG"><p>标签14</p></div>
<div><img src="../img/cat.png"><p>标签15</p></div>
<div><img src="../img/crab.png"><p>标签16</p></div>
<div><img src="../img/iqiyi.png"><p>标签17</p></div>
<div><img src="../img/sls.jpg"><p>标签18</p></div>
<div><img src="../img/vr.png"><p>标签19</p></div>
<div><img src="../img/wx.PNG"><p>标签20</p></div>
<div><img src="../img/1.jpg"><p>标签21</p></div>
<div><img src="../img/2.PNG"><p>标签22</p></div>
<div><img src="../img/3.png"><p>标签23</p></div>
<div><img src="../img/4.png"><p>标签24</p></div>
<div><img src="../img/5.png"><p>标签25</p></div>
<div><img src="../img/6.png"><p>标签26</p></div>
<div><img src="../img/7.png"><p>标签27</p></div>
<div><img src="../img/8.png"><p>标签28</p></div>
<div><img src="../img/9.png"><p>标签29</p></div>
<div><img src="../img/10.PNG"><p>标签30</p></div>
<div><img src="../img/11.png"><p>标签31</p></div>
<div><img src="../img/12.png"><p>标签32</p></div>
<div><img src="../img/13.PNG"><p>标签33</p></div>
<div><img src="../img/bl.PNG"><p>标签34</p></div>
<div><img src="../img/cat.png"><p>标签35</p></div>
<div><img src="../img/crab.png"><p>标签36</p></div>
<div><img src="../img/iqiyi.png"><p>标签37</p></div>
<div><img src="../img/sls.jpg"><p>标签38</p></div>
<div><img src="../img/vr.png"><p>标签39</p></div>
<div><img src="../img/wx.PNG"><p>标签40</p></div>
</div>
</body>
</html>
使用多列实现瀑布流效果.gif
