浮动在行 <figure> & <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/

浮动在行 <figure> & <figcaption>

Floating in row <figure> & <figcaption>

html

css

figure

floating

css-float