الگو:دایره های کنار هم: تفاوت میان نسخه‌ها

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

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

@@ خط ۱: / خط ۱: @@
-<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:12px;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;flex:1 1 180px;max-width:250px;">
+    <!-- تکرار برای هر ۵ آیتم -->
-{{کانتینرعکس دایره|تصویر={{{تصویر1|}}}}}
+    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 200px; max-width: 250px; gap: 2px;">
-<div style="margin-top:-2px;padding:0;line-height:1;text-align:center; font-size: clamp(14px, 1.2vw, 17px) !important;">{{{کپشن1|}}}</div>
+        {{کانتینرعکس دایره|تصویر={{{تصویر1|}}}}}
-</div>
+        {{#if:{{{کپشن1|}}}|
+        <div style="font-size: 1em; text-align: center;">{{{کپشن1}}}</div>
-<div style="display:flex;flex-direction:column;align-items:center;flex:1 1 180px;max-width:250px;">
+        }}
-{{کانتینرعکس دایره|تصویر={{{تصویر2|}}}}}
+    </div>
-<div style="margin-top:-2px;padding:0;line-height:1;text-align:center; font-size: clamp(14px, 1.2vw, 17px) !important;">{{{کپشن2|}}}</div>
-</div>
+    <!-- برای آیتم‌های بعدی هم از همین استایل flex: 1 1 200px استفاده کنید -->
+    <!-- ... -->
-<div style="display:flex;flex-direction:column;align-items:center;flex:1 1 180px;max-width:250px;">
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 200px; max-width: 250px; gap: 2px;">
-{{کانتینرعکس دایره|تصویر={{{تصویر3|}}}}}
+        {{کانتینرعکس دایره|تصویر={{{تصویر2|}}}}}
-<div style="margin-top:-2px;padding:0;line-height:1;text-align:center; font-size: clamp(14px, 1.2vw, 17px) !important;">{{{کپشن3|}}}</div>
+        {{#if:{{{کپشن2|}}}|
-</div>
+        <div style="font-size: 1em; text-align: center;">{{{کپشن2}}}</div>
+        }}
-<div style="display:flex;flex-direction:column;align-items:center;flex:1 1 180px;max-width:250px;">
+    </div>
-{{کانتینرعکس دایره|تصویر={{{تصویر4|}}}}}
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 200px; max-width: 250px; gap: 2px;">
-<div style="margin-top:-2px;padding:0;line-height:1;text-align:center; font-size: clamp(14px, 1.2vw, 17px) !important;">{{{کپشن4|}}}</div>
+        {{کانتینرعکس دایره|تصویر={{{تصویر3|}}}}}
-</div>
+        {{#if:{{{کپشن3|}}}|
+        <div style="font-size: 1em; text-align: center;">{{{کپشن3}}}</div>
-<div style="display:flex;flex-direction:column;align-items:center;flex:1 1 180px;max-width:250px;">
+        }}
-{{کانتینرعکس دایره|تصویر={{{تصویر5|}}}}}
+    </div>
-<div style="margin-top:-2px;padding:0;line-height:1;text-align:center; font-size: clamp(14px, 1.2vw, 17px) !important;">{{{کپشن5|}}}</div>
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 200px; max-width: 250px; gap: 2px;">
-</div>
+        {{کانتینرعکس دایره|تصویر={{{تصویر4|}}}}}
+        {{#if:{{{کپشن4|}}}|
+        <div style="font-size: 1em; text-align: center;">{{{کپشن4}}}</div>
+        }}
+    </div>
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 200px; max-width: 250px; gap: 2px;">
+        {{کانتینرعکس دایره|تصویر={{{تصویر5|}}}}}
+        {{#if:{{{کپشن5|}}}|
+        <div style="font-size: 1em; text-align: center;">{{{کپشن5}}}</div>
+        }}
+    </div>
 </div>