0

I would like to add list of images (using figure and figcaption) in rows which should be responsive.

figcaption should have the same with as the figure.

I was trying this, but it works only when all figcaption have the same height; if not, the result is a mess (change the browser width to see the issue):

enter image description here

figure { display: table; float: left; } 
figcaption { display: table-caption; caption-side: bottom ; }

I also did this that works good on Firefox, but Chrome doesn't see style width: 100% of figcaption.

enter image description here

figure {
 display: inline-block;
 vertical-align: top;
}
img, figcaption {
 vertical-align: bottom;
}
figcaption {
 width: 100%;
 display: table-caption;
 background: #f55544;
}

Please help - I must finish this but I don't have any more ideas to resolve this problem.

Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
noiragneau
  • 50
  • 1
  • 10
  • What is the expected behavior? Add a picture or a link to a picture to show people. And what do you mean by "I was trying this but it works only when figcaptions have the same height"? It seems to be working just fine with that solution. – Alvaro Montoro Jun 16 '15 at 11:30
  • Hi, I added links to images. Sorry for that method but I couldn't add extra link or images because I have not enough reputation – noiragneau Jun 18 '15 at 05:32
  • Can you use JavaScript? or are you looking for a CSS-only solution? – Alvaro Montoro Jun 18 '15 at 12:09
  • I prefer CSS of course but all in all I could use JS – noiragneau Jun 19 '15 at 05:24

1 Answers1

0

This solution uses JavaScript, there may be another solution using only CSS and flex displays but I don't know it right now. It would consist on finding the highest figure, and then setting that height to the rest of the figures like this.

It would be like this:

var fc = document.querySelectorAll("figcaption");
var mh = 0;

// get the maximum height
for (var x = 0; x < fc.length; x++) {
    if (fc[x].offsetHeight > mh) { mh = fc[x].offsetHeight; }
}

// set all the figcaptions with the same maximum height
for (var x = 0; x < fc.length; x++) {
    fc[x].style.height = mh + "px";
}
figure { display: table; float: left; } 
figcaption { display: table-caption; caption-side: bottom ; }
<figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>
<figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>
    <figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquafgfdg. Ut enim ad minimrfgdfg gf fdg f g fd gfd g  veniam, quifdgfds nostrud fdgfdgexercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure><figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>
<figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmofgdgdfgdfgfdgd tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>
    <figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquafgfdg. Ut enim ad minimrfgdfg gf fdg f g fd gfd g  veniam, quifdgfds nostrud fdgfdgexercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>

And you can see it also on this JSFiddle: http://jsfiddle.net/tm4tjp4c/8/

Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
  • Hi, solution is much more easier... http://stackoverflow.com/questions/32196141/width-100-in-css-is-not-working-in-google-chrome – noiragneau Aug 25 '15 at 06:26