直接上我的 markdown 源码就好了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
<style> .blog_photo_album_grid { -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; column-count: 3; column-gap: 10px; column-fill: auto; } .blog_photo_album_block { background-color: none; display: block; padding: 10px; word-wrap: break-word; margin-bottom: 10px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; border-style: solid; border-width: 1px; border-radius: 5px; border-color: #f0f0f0; box-shadow: 3px 3px 3px #f0f0f0; } </style> <div class="blog_photo_album_grid"> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/doge.svg"><h5 align="center">Hey, bro?</h5></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/brine_duck.jpg"><div align="center">教工餐厅卤鸭</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/hall_chick_8.jpg"><div align="center">咖喱鸡扒饭</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/gongcha_pancake.jpg"><div align="center">贡茶手抓饼</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/griddle_braised_rice.jpg"><div align="center">烤盘饭</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/lanzhou_beef_noodles.jpg"><div align="center">兰州牛肉面</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/gongcha_pancake_1.jpg"><div align="center">贡茶手抓饼+1</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/hall_duck_8.jpg"><div align="center">黑椒鸭扒饭</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/eggtar.jpg"><div align="center">亲手做的蛋挞</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/eggtar_1.jpg"><div align="center">亲手做的蛋挞+1</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/chashao.jpg"><div align="center">旺角叉烧饭</div></div> <div class="blog_photo_album_block"><img src="/pictures/photo_album/eat/tea_cake.jpg"><div align="center">饭堂小吃</div></div> </div>
效果可以参考👇