stevenhu — 2013-08-09T16:42:12-04:00 — #1
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:
<img src="../../../thumbs/filename.png" alt="Name"/><br /><label class="title">Name</label></a>
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.
picnictutorials — 2013-08-09T16:55:37-04:00 — #2
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
stevenhu — 2013-08-09T16:59:14-04:00 — #3
There are no rows or columns, just divs that float left. Wider screens will mean more divs in a row.
I went ahead and set the height of the "tile" container div to larger than the image and able to accompany three lines of text.
Any other solutions out there?
ralphm — 2013-08-09T17:51:17-04:00 — #4
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.
stevenhu — 2013-08-09T17:58:41-04:00 — #5
So my problem was using float AND display. Display:inline-block did not work earlier.
The label element is carry-over code that I am updating. I'll look up fig caption and see what it does.
Thanks for helping!
paulob — 2013-08-10T06:22:01-04:00 — #6
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.
You can read up on the exact rules of what wins out here.
Here are some old examples of inline-block and captions:
You can lose the old ie7 and mozilla hacks these days if you don't support those browsers.