Difference between revisions of "Template:Box"
m |
m |
||
| Line 1: | Line 1: | ||
<includeonly>{{#switch:{{lc:{{{1|}}}}} | <includeonly>{{#switch:{{lc:{{{1|}}}}} | ||
|break=</div> | |break=</div> | ||
| − | <div style{{=}}"display:inline-block; vertical-align: top; margin: | + | <div style{{=}}"display:inline-block; vertical-align: top; margin: -15 -15 -15 -15;{{#if:{{{padding|}}}|padding-right:{{{padding}}};}}{{#if:{{{padding-bottom|}}}|padding-bottom:{{{padding-bottom}}};}}{{#if:{{{box-width|}}}|width:{{{box-width}}};}}{{#if:{{{box-height|}}}|height:{{{box-height}}}; overflow:hidden;}}{{{style|}}}"> |
|end=</div></div> | |end=</div></div> | ||
|start | |start | ||
|<div {{#if:{{{max-width|}}}|style="max-width:{{{max-width}}};"}}><div style{{=}}"display:inline-block; vertical-align: top; margin: 0 0 0 0;{{#if:{{{padding|}}}|padding-right:{{{padding}}};}}{{#if:{{{padding-bottom|}}}|padding-bottom:{{{padding-bottom}}};}}{{#if:{{{box-width|}}}|width:{{{box-width}}};}}{{#if:{{{box-height|}}}|height:{{{box-height}}}; overflow:hidden;}}{{{style|}}}"> | |<div {{#if:{{{max-width|}}}|style="max-width:{{{max-width}}};"}}><div style{{=}}"display:inline-block; vertical-align: top; margin: 0 0 0 0;{{#if:{{{padding|}}}|padding-right:{{{padding}}};}}{{#if:{{{padding-bottom|}}}|padding-bottom:{{{padding-bottom}}};}}{{#if:{{{box-width|}}}|width:{{{box-width}}};}}{{#if:{{{box-height|}}}|height:{{{box-height}}}; overflow:hidden;}}{{{style|}}}"> | ||
| − | }}</includeonly> | + | }}</includeonly><noinclude>{{documentation}}[[Category:Templates]]</noinclude> |
| − | |||
| − | <noinclude>{{documentation}}[[Category: | ||
Revision as of 17:21, 17 July 2015
(view - edit) Documentation
This template is to be used with fixed width objects to arrange them in a free "floating" fashion where they will take the least amount of vertical space by utalizing as much horizontal space as the individual "boxes" allows. There's also no limit to the amount of boxes you want to make with this, it can be anything from 2 to however many you want. But it does look bad if the objects/boxes are of different height.
Variables
The structure is as follows {{box| first variable | optional variable (padding=) }}
- The first variable has three values you can set it to.
- start
- Used for the first instance in the array.
- break
- Used between two boxes.
- end
- Used to end the array of boxes.
- padding= Defines the distance to neighbour elements towards the right. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).
- padding-bottom= Defines the distance to neighbour elements towards the bottom. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).
- box-width= Defines the width of the following box. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).
- box-height= Defines the height of the following box. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).
Example
{{Box|start|padding=1em}}
{| class="wikitable" width="400px"
|<br />
|}
{{Box|break|padding=1em}}
{| class="wikitable" width="400px"
|<br />
|}
{{Box|break}}
{| class="wikitable" width="400px"
|
|}
{{Box|end}}
This code will become these three boxes below, displayed either in a single row a single column or 2 on one row and 1 on the next, depending on your browser window size. Also there's no need to use padding on the last break as nothing can come after it.
