html - float 在 和 行中

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/