Grid 實現瀑布流布局
阿新 • • 發佈：2019-02-23
right har order pre doc one ali head hidden
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 </head> 7 <style type="text/css"> 8 #content { 9 width: 400px; 10 } 11 #content, 12 #content>.panel, 13 #content .column, 14 #content .column>li { 15 margin: 0px; 16 padding: 0px; 17 } 18 #content>.panel { 19 width: 100%; 20 background: #eee; 21 overflow-y: hidden; 22 padding-left: 5px; 23 padding-right: 5px; 24 } 25 #content .column { 26 width:190px; 27 float: left; 28 margin-left: 5px; 29 margin-right: 5px; 30 31 } 32 #content .column>li{ 33 width: 100%; 34 list-style-type: none; 35 border-radius: 5px; 36 background: #fff; 37 margin-bottom: 10px; 38 margin-top: 10px; 39 overflow: hidden; 40 text-align: center; 41 } 42 #content .column img { 43 border: none; 44 vertical-align: middle; 45 } 46</style> 47 48 <body> 49 <div id="content"> 50 <div class="panel"> 51 <ul class="left column"> 52 <li><img src="timg.jpg" width="100%" height="65px"></li> 53 <li><img src="timg.jpg" width="100%" height="250px"></li> 54 <li><img src="timg.jpg" width="100%" height="250px"></li> 55 <li><img src="timg.jpg" width="100%" height="250px"></li> 56 <li><img src="timg.jpg" width="100%" height="250px"></li> 57 <li><img src="timg.jpg" width="100%" height="250px"></li> 58 </ul>
59
60 61 <ul class="right column"> 62 <li><img src="timg.jpg" width="100%" height="200px"></li> 63 <li><img src="timg.jpg" width="100%" height="250px"></li> 64 <li><img src="timg.jpg" width="100%" height="250px"></li> 65 <li><img src="timg.jpg" width="100%" height="250px"></li> 66 <li><img src="timg.jpg" width="100%" height="250px"></li> 67 </ul> 68 </div> 69 </div> 70 71 </body> 72 73 </html>
Grid 實現瀑布流布局