搜索到
1
篇与
columns
的结果
-
Html5和CSS3 columns实现瀑布流布局 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从其父元素继承此属性引用w3school链接<!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> .box { position: relative; width: 100%; columns: 2; column-gap: 30px; } .item { width: 100%; margin-bottom: 10px; break-inside: avoid; } 1 2 3 4 5 6
