• 直接上我的 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>
    

效果可以参考👇