Html5和CSS3 columns实现瀑布流布局
break-inside 属性规定在指定元素内部是否应发生分页（page-break）、分列（column-break）或分区（region-break）。
break-inside 属性扩展了 CSS2 的 page-break-inside 属性。
通过使用 break-inside，您可以告知浏览器在图像、代码片段、表格以及列表内部避免中断。
break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;
| 值 | 描述 |
|---|---|
| auto | 默认。在元素内自动进行分页、分列、分区 |
| avoid | 避免在元素内出现页、列、区域中断 |
| avoid-column | 避免在元素内分列 |
| avoid-page | 避免在元素内分页 |
| avoid-region | 避免在元素内分区 |
| initial | 将此属性设置为其默认值 |
| inherit | 从其父元素继承此属性 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 100%;
columns: 2;
column-gap: 30px;
}
.item {
width: 100%;
margin-bottom: 10px;
break-inside: avoid;
}
</style>
</head>
<body>
<div class="box">
<div class="item" style="height: 300px;background-color: rgb(212, 198, 3);">1</div>
<div class="item" style="height: 600px;background-color: rgb(90, 41, 206);">2</div>
<div class="item" style="height: 400px;background-color: rgb(3, 118, 163);">3</div>
<div class="item" style="height: 700px;background-color: rgb(245, 9, 9);">4</div>
<div class="item" style="height: 900px;background-color: rgb(190, 16, 176);">5</div>
<div class="item" style="height: 800px;background-color: rgb(245, 9, 9);">6</div>
</div>
</body>
</html>1
2
3
4
5
6
评论 (0)