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

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

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

@@ خط ۱: / خط ۱: @@
-<div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 15px; justify-content: center; align-items: flex-start; width: 100%; margin: 15px 0; box-sizing: border-box;">
+<div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 0px; justify-content: center; align-items: flex-start; width: 100%; margin: 5px 0;">
+    <!-- نکته فنی: مقدار gap در div اصلی بالا را می‌توانید به 1px یا 0px کاهش دهید -->
-  <!-- آیتم اول -->
+    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 16%; min-width: 120px; gap: 2px;">
-  <div style="display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 150px; max-width: 180px; box-sizing: border-box;">
+        {{کانتینرعکس دایره|تصویر={{{تصویر1|}}}}}
-{{کانتینرعکس دایره|تصویر={{{تصویر1|}}}}}
+        {{#if:{{{کپشن1|}}}|
+        <div style="font-size: 1em; text-align: center; line-height: 0;">{{{کپشن1}}}</div>
+        }}
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 16%; min-width: 120px; gap: 2px;">
+        {{کانتینرعکس دایره|تصویر={{{تصویر2|}}}}}
+        {{#if:{{{کپشن2|}}}|
+        <div style="font-size: 1em; text-align: center; line-height: 0;">{{{کپشن2}}}</div>
+        }}
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 16%; min-width: 120px; gap: 2px;">
+        {{کانتینرعکس دایره|تصویر={{{تصویر3|}}}}}
+        {{#if:{{{کپشن3|}}}|
+        <div style="font-size: 1em; text-align: center; line-height: 0;">{{{کپشن3}}}</div>
+        }}
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 16%; min-width: 120px; gap: 2px;">
+        {{کانتینرعکس دایره|تصویر={{{تصویر4|}}}}}
+        {{#if:{{{کپشن4|}}}|
+        <div style="font-size: 1em; text-align: center; line-height: 0;">{{{کپشن4}}}</div>
+        }}
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 16%; min-width: 120px; gap: 2px;">
+        {{کانتینرعکس دایره|تصویر={{{تصویر5|}}}}}
+        {{#if:{{{کپشن5|}}}|
+        <div style="font-size: 1em; text-align: center; line-height: 0;">{{{کپشن5}}}</div>
+        }}
+    </div>
+</div>
+<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 200px; max-width:250px;">
+    {{کانتینرعکس دایره|تصویر={{{تصویر1|}}}}}
      {{#if:{{{کپشن1|}}}|
-       <div style="display: block; font-size: 0.95em; line-height: 1.4; text-align: center; color: #333; word-wrap: break-word; width: 100%;">
+       <div style="display:block; font-size:1em; line-height:1.2; margin-top:4px; text-align:center;">
-{{{کپشن1}}}
+        {{{کپشن1}}}
        </div>
      }}
    </div>
-  <!-- آیتم دوم -->
+   <div style="display:flex; flex-direction:column; align-items:center; flex:1 1 200px; max-width:250px;">
-   <div style="display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 150px; max-width: 180px; box-sizing: border-box;">
+    {{کانتینرعکس دایره|تصویر={{{تصویر2|}}}}}
-{{کانتینرعکس دایره|تصویر={{{تصویر2|}}}}}
      {{#if:{{{کپشن2|}}}|
-       <div style="display: block; font-size: 0.95em; line-height: 1.4; text-align: center; color: #333; word-wrap: break-word; width: 100%;">
+       <div style="display:block; font-size:1em; line-height:1.2; margin-top:4px; text-align:center;">
-{{{کپشن2}}}
+        {{{کپشن2}}}
        </div>
      }}
    </div>
-  <!-- آیتم سوم -->
+   <div style="display:flex; flex-direction:column; align-items:center; flex:1 1 200px; max-width:250px;">
-   <div style="display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 150px; max-width: 180px; box-sizing: border-box;">
+    {{کانتینرعکس دایره|تصویر={{{تصویر3|}}}}}
-{{کانتینرعکس دایره|تصویر={{{تصویر3|}}}}}
      {{#if:{{{کپشن3|}}}|
-       <div style="display: block; font-size: 0.95em; line-height: 1.4; text-align: center; color: #333; word-wrap: break-word; width: 100%;">
+       <div style="display:block; font-size:1em; line-height:1.2; margin-top:4px; text-align:center;">
-{{{کپشن3}}}
+        {{{کپشن3}}}
        </div>
      }}
    </div>
-  <!-- آیتم چهارم -->
+   <div style="display:flex; flex-direction:column; align-items:center; flex:1 1 200px; max-width:250px;">
-   <div style="display: flex; flex-content: column; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 150px; max-width: 180px; box-sizing: border-box;">
+    {{کانتینرعکس دایره|تصویر={{{تصویر4|}}}}}
-{{کانتینرعکس دایره|تصویر={{{تصویر4|}}}}}
      {{#if:{{{کپشن4|}}}|
-       <div style="display: block; font-size: 0.95em; line-height: 1.4; text-align: center; color: #333; word-wrap: break-word; width: 100%;">
+       <div style="display:block; font-size:1em; line-height:1.2; margin-top:4px; text-align:center;">
-{{{کپشن4}}}
+        {{{کپشن4}}}
        </div>
      }}
    </div>
-  <!-- آیتم پنجم -->
+   <div style="display:flex; flex-direction:column; align-items:center; flex:1 1 200px; max-width:250px;">
-   <div style="display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 150px; max-width: 180px; box-sizing: border-box;">
+    {{کانتینرعکس دایره|تصویر={{{تصویر5|}}}}}
-{{کانتینرعکس دایره|تصویر={{{تصویر5|}}}}}
      {{#if:{{{کپشن5|}}}|
-       <div style="display: block; font-size: 0.95em; line-height: 1.4; text-align: center; color: #333; word-wrap: break-word; width: 100%;">
+       <div style="display:block; font-size:1em; line-height:1.2; margin-top:4px; text-align:center;">
-{{{کپشن5}}}
+        {{{کپشن5}}}
        </div>
      }}