Template:SideBySide: Difference between revisions
From HorizonXI Wiki
m (added code for examples) |
(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) |
||
| 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><!-- | ||
Latest revision as of 13:59, 16 September 2023
!!!
DO NOT USE, DOES NOT WORK WITH TABLES
!!!
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==
}}
