h5-多列布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .wrapper{ 8 width: 100%; 9 padding: 20px; 10 box-sizing: border-box; 11 /*设置多列布局*/ 12 /*1.设置列数*/ 13 column-count: 3; 14 /*添加列之间的间隙样式,与边框样式的添加一样*/ 15 column-rule: dashed 3px red; 16 /*设置列间隙大小*/ 17 column-gap: 50px; 18 /*设置宽列 19 原则:取大优先 20 1.如果认为设置宽度更大,则取更大的值,但会填满整个屏幕,意味着最终的宽度可能也会大于设置的宽度---填充满整个屏幕 21 2.如果认为设置宽度更小,使用默认计算的宽度*/ 22 column-width: 300px; 23 24 } 25 h4{ 26 /*设置跨列显示*/ 27 column-span: all; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="wrapper"> 33 <h4> 34 爱的目送 35 </h4> 36