主题说明

<!-- 两张一行，整组说明 -->
<figure class="image-group">
  <div class="image-row two">
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
  </div>
  <figcaption class="image-caption">
    <em>房间的照片是官网找的，因为我当时只顾吃喝睡觉，很多照片没有拍。</em>
  </figcaption>
</figure>

<!-- 四张一行，整组说明（可与单图/多图复用） -->
<figure class="image-group">
  <div class="image-row four">
    <img src="a.jpg" alt="">
    <img src="b.jpg" alt="">
    <img src="c.jpg" alt="">
    <img src="d.jpg" alt="">
  </div>
  <figcaption class="image-caption">这组图为 XX 场景的实拍。</figcaption>
</figure>

<!-- 单张图片 + 整组说明 -->
<figure class="image-group">
  <div class="single-image">
    <img src="room.jpg" alt="房间">
  </div>
  <figcaption class="image-caption"><em>入住当晚仅拍了这张。</em></figcaption>
</figure>

<!-- 带每张图片说明 + 整组说明，可混用 -->
<figure class="image-group">
  <div class="image-row two">
    <div data-title="床头"><img src="bed.jpg" alt=""></div>
    <div data-title="窗景"><img src="view.jpg" alt=""></div>
  </div>
  <figcaption class="image-caption">整体感受：采光很好，比较安静。</figcaption>
</figure>


<!-- 1 张（不带说明，建议用 .single-image） -->
<div class="single-image">
  <img src="image1.jpg" alt="图片说明">
</div>

<!-- 2 张（不带说明，直接 img 子项） -->
<div class="image-row two">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">
</div>

<!-- 3 张（不带说明） -->
<div class="image-row three">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">
  <img src="image3.jpg" alt="图片3">
</div>

<!-- 4 张（不带说明） -->
<div class="image-row four">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">
  <img src="image3.jpg" alt="图片3">
  <img src="image4.jpg" alt="图片4">
</div>


<!-- 1 张（带说明，data-title 写在 .single-image 上） -->
<div class="single-image" data-title="大图说明">
  <img src="image1.jpg" alt="图片说明">
</div>

<!-- 2 张（带说明，每张图外包一层 div 并加 data-title） -->
<div class="image-row two">
  <div data-title="图片1说明"><img src="image1.jpg" alt="图片1"></div>
  <div data-title="图片2说明"><img src="image2.jpg" alt="图片2"></div>
</div>

<!-- 3 张（带说明） -->
<div class="image-row three">
  <div data-title="图片1说明"><img src="image1.jpg" alt="图片1"></div>
  <div data-title="图片2说明"><img src="image2.jpg" alt="图片2"></div>
  <div data-title="图片3说明"><img src="image3.jpg" alt="图片3"></div>
</div>

<!-- 4 张（带说明） -->
<div class="image-row four">
  <div data-title="图片1说明"><img src="image1.jpg" alt="图片1"></div>
  <div data-title="图片2说明"><img src="image2.jpg" alt="图片2"></div>
  <div data-title="图片3说明"><img src="image3.jpg" alt="图片3"></div>
  <div data-title="图片4说明"><img src="image4.jpg" alt="图片4"></div>
</div>