Update index.html

index.html

@@ -486,30 +486,62 @@ <h2 class="title is-3">Qualitative Comparisons</h2>
     <!--/ Experiment. -->
   </div>
 </section>
-  
+
 <section class="section">
   <div class="container is-max-desktop">
     <!-- Experiment. -->
     <div class="columns is-centered has-text-centered">
       <div class="column is-four-fifths">
-        <h2 class="title is-3">Quantitate Metric</h2>
-        <figure class="image is-centered">
-          <img src="./static/images/metric_average.png" alt="Experiment Illustration">
-          <img src="./static/images/metric_detail.png" alt="Experiment Illustration">
-          <img src="./static/images/metric_clip.png" alt="Experiment Illustration">
-        </figure>
+        <h2 class="title is-3">Quantitative Metric</h2>
+        <!-- 图片布局 -->
+        <div class="columns is-multiline is-centered">
+          <div class="column is-one-third">
+            <figure class="image">
+              <img src="./static/images/metric_average.png" alt="Metric Average">
+              <figcaption>Average Metric</figcaption>
+            </figure>
+          </div>
+          <div class="column is-one-third">
+            <figure class="image">
+              <img src="./static/images/metric_detail.png" alt="Metric Detail">
+              <figcaption>Detail Metric</figcaption>
+            </figure>
+          </div>
+          <div class="column is-one-third">
+            <figure class="image">
+              <img src="./static/images/metric_clip.png" alt="Metric Clip">
+              <figcaption>CLIP Metric</figcaption>
+            </figure>
+          </div>
+        </div>
+        <!-- 描述内容 -->
         <div class="content has-text-justified">
           <p>
-            Quantitative comparison with competing methods.
+            Quantitative comparison with competing methods demonstrates the superiority of our approach.
           </p>
         </div>
       </div>
     </div>
     <!--/ Experiment. -->
   </div>
-</section>
 
+<!--   <style>
+    figure.image {
+      text-align: center; /* 图片和文字居中 */
+    }
+
+    figure img {
+      max-width: 100%; /* 确保图片不超出容器 */
+      height: auto; /* 保持图片比例 */
+      margin-bottom: 10px; /* 图片和标题之间的间距 */
+    }
 
+    figcaption {
+      font-size: 0.9rem; /* 设置标题大小 */
+      color: #555; /* 设置标题颜色 */
+    }
+  </style> -->
+</section>