StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POApplying a clearfix to nth-child without additional markup
text
Body
copied!<p>First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:</p> <p><a href="http://jsfiddle.net/bb_matt/VsH7X/" rel="nofollow">http://jsfiddle.net/bb_matt/VsH7X/</a></p> <p>Here's the explanation - my rationale: </p> <p>I'm creating a responsive site using the 1140 grid framework. It's a fairly complex layout.</p> <p>I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements. Each of the li elements has a right margin of 5%. I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.</p> <p>Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages. </p> <p>The only remaining issue to fix is to clear between rows. I can't add additional html markup and I want to steer clear of overly complex jquery fixes. </p> <p>I know of two ways to fix this, but I'm not keen on either of them.</p> <p>First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... <em>however</em>, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.</p> <p>Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat. </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