StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Suppose the HTML page generated contains:</p> <pre><code><ul> <li class="item1">A</li> <li class="item2">B</li> <li class="item3">C</li> <li class="item4">D</li> <li class="item5">E</li> <li class="item6">F</li> <li class="item7">G</li> <li class="item8">H</li> <li class="item9">I</li> <li class="item10">J</li> <li class="item11">K</li> <li class="item12">L</li> <li class="item13">M</li> <li class="item14">N</li> <li class="item15">O</li> </ul> </code></pre> <p>You may now use JavaScript to generate the required CSS as follows:</p> <pre><code>/* unorderedList: the HTML ul element columnSize: the number of items per column columnGap: the distance between 2 columns in ems offset: the offset of the first column in ems */ function generateMultiColumnLayout(unorderedList, columnSize, columnGap, offset) { var items = unorderedList.getElementsByTagName("li"); for (var i = 0, l = items.length; l--; i++) { var itemStyle = items[i].style; itemStyle.lineHeight = "1.2em"; if (!i && i % columnSize) { // old column itemStyle.marginLeft = offset + "em"; } else { // start of new column offset += columnGap; itemStyle.marginLeft = offset + "em"; itemStyle.marginTop = -columnSize + "em"; } } } window.onload = function () { var items = document.getElementsByClassName("item1"); for (var i = 0, l = items.length; l--; i++) { generateMultiColumnLayout(items[i].parent, 8, 10, 5); } }; </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload