Junitar Posted February 9, 2017 Share Posted February 9, 2017 (edited) Hi, I'm making a responsive centered tiled gallery for my website. For aesthetic reasons, I only need to have a margin between the images. To do so, I set a left margin to each elements but the first, in each row, using the :nth-child() selector. I got it to work as I wanted to but I'm now facing a problem with the image captions which break the floating elements if I enter too many words in them. Please, see the jsfiddle example here: https://jsfiddle.net/0w379712/ How can I do to prevent this? Ideally, I would like to have the entire row going down if there's too much text above. I thought a clear: left in the last-child of the row would fix this but it's not working. Also, would you recommend to use the :nth-child() or :nth-of-type() selector to achieve this? I've analysed several web galleries with similar mosaic and none of them used these kind of selectors. Probably for browser compatibility reasons, but can't say for sure. Edit: I finally managed to fix the problem using .tile:nth-child(2n+1) / .tile:nth-child(3n+1) { clear: left }, I messed up with the syntax of the selector in my previous attempts… Edited February 9, 2017 by Junitar Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now