Databases
StackOverflow2013
Postsdbo
PODisplay inline block elements from bottom up, with trailing elements on top
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODisplay inline block elements from bottom up, with trailing elements on top
    text
    copied!<p>I have a <code>&lt;ul&gt;</code> of <code>display:inline-block</code> list items - they display as expected, wrapping around like text in a paragraph when they reach the end of the line. <a href="http://jsfiddle.net/daCrosby/JkZsD/" rel="nofollow noreferrer">See example</a> in which there are 6 elements, 4 on the first line and 2 on the second.</p> <p>I'd like to have the trailing elements on the top rather than the bottom. To build on the previous example, if there's 6 elements, I want 2 to be on top and 4 on bottom.</p> <p><a href="http://jsfiddle.net/daCrosby/JkZsD/1/" rel="nofollow noreferrer">Here's an updated version of the elements</a> with what I'm looking for, however this solution uses multiple <code>&lt;ul&gt;</code> elements which is not an option because the number of elements will frequently change and I cannot hard code it each time, especially with mobile device considerations.</p> <p>I'd prefer a non-JavaScript solution if at all possible. As I hinted, it should be a responsive solution that fits at all page widths (no problem if it's not always 2 on top, 6 on bottom, just generally more on bottom and fewer on top).</p> <p>My biggest issue is at some screen sizes my elements are making an upside-down pyramid shape due to the sizes &amp; placements, and I think a right-side-up pyramid would be preferable.</p> <h2>For the visual learners</h2> <p><strong>What is</strong></p> <p><img src="https://i.stack.imgur.com/eREWi.jpg" alt="enter image description here"></p> <p><strong>What should be</strong> <img src="https://i.stack.imgur.com/l2JgO.jpg" alt="enter image description here"></p> <h2>Relevant example code</h2> <p><strong>HTML</strong></p> <pre><code>&lt;ul&gt; &lt;li&gt;&lt;img src="http://placehold.it/200x200" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="http://placehold.it/200x200" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="http://placehold.it/200x200" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="http://placehold.it/200x200" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="http://placehold.it/200x200" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="http://placehold.it/200x200" /&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>li{ display:inline-block; list-style-type:none; } </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