漂浮在行<figure>＆amp; <figcaption>

Question

我想在应该响应的行中添加图像列表（使用figure和figcaption）。

figcaption应与figure相同。

我was trying this，但仅当所有figcaption具有相同的高度时才有效;如果没有，结果是一团糟（更改浏览器宽度以查看问题）：

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

我also did this在Firefox上运行良好，但Chrome没有看到figcaption的样式width: 100%。

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

请帮助 - 我必须完成此操作，但我没有更多的想法来解决此问题。

Answer 1

此解决方案使用JavaScript，可能还有另一种仅使用CSS和flex显示的解决方案，但我现在还不知道。它将包括找到最高的数字，然后将这个高度设置为其他数字。

就像这样：

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>

你也可以在这个JSFiddle上看到它：http://jsfiddle.net/tm4tjp4c/8/