I’m making a simple gallery of thumbnail images that works across varable screen sizes (mostly for mobile and tablets). I use a couple of @media queries to adjust the images large for larger screen sizes. The thumbnails have this pattern:
The problem occurs when the label under the thumbnail wraps to two lines. If all the thumb captions are on one line, then they float all the way left evenly. If a label wraps to two lines, then the next line buts against that div because it sticks out, leaving the left-most space blank and unsightly.
I thought I would need to use the display: property on the tile div, but after trying 9 different display properties, such as display:table-cell, the problem persists.
How do I get the height the same for all divs so they’ll wrap evenly? I don’t want to change the caption lengths. I don’t want to set the height because it needs to work whether the label is 1, 2, or 3 lines across several screen sizes.
First thought you could wrap each column In a div and give it the fixed height. If you know it won’t go more than three lines say give it that height. Although I’m sure there is some display table elegant solution
Instead of floating the boxes, use display: inline-block instead. That way, the boxes will line up evenly and not snag on each other. Also set them to vertical-align: top;
That’s the wrong place to be using a label element, by the way. If you want a caption, you may as well go for the new fig caption element.
If you use “float” then “display” is ignored (unless it is display:none) and the value computes to block. Therefore if you say float and inline-block then inline-block is ignored. You need to remove the float. On the other hand if you use position:absolute then float is ignored.