Harvest festival 2024.png

Dare to try out the Harvest Festival 2024!?

Template:SideBySide: Difference between revisions

From HorizonXI Wiki
(Created page with "<includeonly><onlyinclude>__NOTOC__<div class="flex-container"><div class="flex-container-item-{{{columns|2}}}">{{{1}}}</div><div class="flex-container-item-{{{columns|2}}}">{{{2}}}</div><!-- -->{{#if:{{{3|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{3}}}</div><!-- -->{{#if:{{{4|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{4}}}</div><!-- -->{{#if:{{{5|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{5}}}</div><!-- -->{{#if:{{{6|}}}|<div class...")
 
(doesnt work with tables, put a note at the top of the page, kept the page for now not to lose the code if we still find a way to make it work)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<div style="background-color: salmon; height: 100px; text-align: center;">!!!<br>DO NOT USE, DOES NOT WORK WITH TABLES<br>!!!</div>
<includeonly><onlyinclude>__NOTOC__<div class="flex-container"><div class="flex-container-item-{{{columns|2}}}">{{{1}}}</div><div class="flex-container-item-{{{columns|2}}}">{{{2}}}</div><!--
<includeonly><onlyinclude>__NOTOC__<div class="flex-container"><div class="flex-container-item-{{{columns|2}}}">{{{1}}}</div><div class="flex-container-item-{{{columns|2}}}">{{{2}}}</div><!--
-->{{#if:{{{3|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{3}}}</div><!--
-->{{#if:{{{3|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{3}}}</div><!--
Line 31: Line 33:


4 columns side by side with 4 elements.  
4 columns side by side with 4 elements.  
<pre>
{{SideBySide|columns=4|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
}}
</pre>


{{SideBySide|columns=4|
{{SideBySide|columns=4|
Line 45: Line 59:


3 columns side by side with 9 elements.  
3 columns side by side with 9 elements.  
<pre>
{{SideBySide|columns=3|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
|
==Test5==
|
==Test6==
|
==Test7==
|
==Test8==
|
==Test9==
}}
</pre>


{{SideBySide|columns=3|
{{SideBySide|columns=3|
Line 70: Line 106:
2 columns side by side with 4 elements.  
2 columns side by side with 4 elements.  


{{SideBySide|columns=4|
<pre>
{{SideBySide|columns=2|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
}}
</pre>
 
{{SideBySide|columns=2|
==Test1==
==Test1==
|
|
Line 83: Line 131:


4 columns side by side with 5 elements.  
4 columns side by side with 5 elements.  
<pre>
{{SideBySide|columns=4|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
|
==Test5==
}}
</pre>


{{SideBySide|columns=4|
{{SideBySide|columns=4|

Latest revision as of 13:59, 16 September 2023

!!!
DO NOT USE, DOES NOT WORK WITH TABLES
!!!


Usage

This template can be used to display content side by side which automatically switches to display on top of each other on smaller screens. It supports up to 12 content arguments and the argument "columns" which can be set to 2, 3 or 4, depending on how many columns are supposed to be displayed at maximum.

Examples

Example 1

4 columns side by side with 4 elements.

{{SideBySide|columns=4|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
}}

Test1

Test2

Test3

Test4


Example 2

3 columns side by side with 9 elements.

{{SideBySide|columns=3|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
|
==Test5==
|
==Test6==
|
==Test7==
|
==Test8==
|
==Test9==
}}

Test1

Test2

Test3

Test4

Test5

Test6

Test7

Test8

Test9


Example 3

2 columns side by side with 4 elements.

{{SideBySide|columns=2|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
}}

Test1

Test2

Test3

Test4


Example 4

4 columns side by side with 5 elements.

{{SideBySide|columns=4|
==Test1==
|
==Test2==
|
==Test3==
|
==Test4==
|
==Test5==
}}

Test1

Test2

Test3

Test4

Test5