دایره های کنار هم - فراغیب

→ تفاوت با ویرایش قدیمی‌تر تفاوت با ویرایش جدیدتر ←

دیداریویکی‌متن

@@ خط ۱: / خط ۱: @@
-<div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-start; width: 100%; margin: 5px 0;">
+<div style="display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; justify-content:center; align-items:flex-start; width:100%; margin:5px 0;">
-    <!-- تکرار برای هر ۵ آیتم -->
+  <div style="display:flex; flex-direction:column; align-items:center; gap:0; flex:1 1 180px; max-width:250px;">
-    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 180px; max-width: 250px; gap: 2px;">
+    {{کانتینرعکس دایره|تصویر={{{تصویر1|}}}}}
-        {{کانتینرعکس دایره|تصویر={{{تصویر1|}}}}}
+    {{#if:{{{کپشن1|}}}|
-        {{#if:{{{کپشن1|}}}|
+      <div style="display:block; font-size:1em; line-height:1; margin-top:-18px; padding:0; text-align:center;">
-        <div style="font-size: 1em; text-align: center;">{{{کپشن1}}}</div>
+        {{{کپشن1}}}
-        }}
+      </div>
-    </div>
+    }}
+  </div>
-    <!-- برای آیتم‌های بعدی هم از همین استایل flex: 1 1 200px استفاده کنید -->
-    <!-- ... -->
+   <div style="display:flex; flex-direction:column; align-items:center; gap:0; flex:1 1 180px; max-width:250px;">
-   <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 180px; max-width: 250px; gap: 2px;">
+    {{کانتینرعکس دایره|تصویر={{{تصویر2|}}}}}
-        {{کانتینرعکس دایره|تصویر={{{تصویر2|}}}}}
+    {{#if:{{{کپشن2|}}}|
-        {{#if:{{{کپشن2|}}}|
+      <div style="display:block; font-size:1em; line-height:1; margin-top:-18px; padding:0; text-align:center;">
-        <div style="font-size: 1em; text-align: center;">{{{کپشن2}}}</div>
+        {{{کپشن2}}}
-        }}
+      </div>
-    </div>
+    }}
-   <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 180px; max-width: 250px; gap: 2px;">
+  </div>
-        {{کانتینرعکس دایره|تصویر={{{تصویر3|}}}}}
-        {{#if:{{{کپشن3|}}}|
+   <div style="display:flex; flex-direction:column; align-items:center; gap:0; flex:1 1 180px; max-width:250px;">
-        <div style="font-size: 1em; text-align: center;">{{{کپشن3}}}</div>
+    {{کانتینرعکس دایره|تصویر={{{تصویر3|}}}}}
-        }}
+    {{#if:{{{کپشن3|}}}|
-    </div>
+      <div style="display:block; font-size:1em; line-height:1; margin-top:-18px; padding:0; text-align:center;">
-   <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 180px; max-width: 250px; gap: 2px;">
+        {{{کپشن3}}}
-        {{کانتینرعکس دایره|تصویر={{{تصویر4|}}}}}
+      </div>
-        {{#if:{{{کپشن4|}}}|
+    }}
-        <div style="font-size: 1em; text-align: center;">{{{کپشن4}}}</div>
+  </div>
-        }}
-    </div>
+   <div style="display:flex; flex-direction:column; align-items:center; gap:0; flex:1 1 180px; max-width:250px;">
-   <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 180px; max-width: 250px; gap: 2px;">
+    {{کانتینرعکس دایره|تصویر={{{تصویر4|}}}}}
-        {{کانتینرعکس دایره|تصویر={{{تصویر5|}}}}}
+    {{#if:{{{کپشن4|}}}|
-        {{#if:{{{کپشن5|}}}|
+      <div style="display:block; font-size:1em; line-height:1; margin-top:-18px; padding:0; text-align:center;">
-        <div style="font-size: 1em; text-align: center;">{{{کپشن5}}}</div>
+        {{{کپشن4}}}
-        }}
+      </div>
-    </div>
+    }}
+  </div>
+   <div style="display:flex; flex-direction:column; align-items:center; gap:0; flex:1 1 180px; max-width:250px;">
+    {{کانتینرعکس دایره|تصویر={{{تصویر5|}}}}}
+    {{#if:{{{کپشن5|}}}|
+      <div style="display:block; font-size:1em; line-height:1; margin-top:-18px; padding:0; text-align:center;">
+        {{{کپشن5}}}
+      </div>
+    }}
+  </div>
 </div>

نسخهٔ ‏۱۳ ژوئیهٔ ۲۰۲۶، ساعت ۰۶:۴۹