StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is possible with some Javascript. I call the following algorithm <code>Columns_Fit</code>:</p> <ol> <li>First find the column with the smallest height and the column with the greatest height.</li> <li>Remove a word from the first paragraph of the greatest column that you found in step #1, and add that word to the smallest column that you found on step #1.</li> <li>Compare the height of the two columns.</li> <li>If their still different, repeat step #2.</li> </ol> <p>That's the principle of the algorithm. You should repeat that for every column by "going to the middle" approach, for example:</p> <pre><code><div id="col1"></div> <div id="col2"></div> <div id="col3"></div> <div id="col4"></div> </code></pre> <p>The above columns are order from the smallest one (<code>col1</code>) to the highest one (<code>col4</code>). Start with <code>col1</code> and <code>col4</code>, and perform on them <code>Columns_Fit</code> algorithm. Later, perform the <code>Columns_Fit</code> algorithm on the next two column: <code>col2</code> and <code>col3</code>. This is why I call this approach "going to the middle".</p> <p>Note that not all columns can be <em>exactly</em> equal in height, there should be a deviation in the height. The deviation is equal to the line height or greater than the line height. (deviation >= line height)</p> <p>Interesting reference: <a href="http://www.alistapart.com/articles/crosscolumn/" rel="nofollow noreferrer">Cross-Column Pull-Outs</a> by Daniel M. Frommelt @ alistapart.com</p>

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