浮动行<figure> & <figcaption>
浮动行<figure> & <figcaption>
提问于 2015-06-16 09:08:33
我想在应该响应的行中添加图像列表(使用figure和figcaption)。
figcaption应该与figure具有相同的特性。
I 试过这个，但只有当所有figcaption都具有相同的高度时才能工作；如果没有，结果会很混乱(更改浏览器的宽度以查看问题)：
figure { display: table; float: left; }
figcaption { display: table-caption; caption-side: bottom ; }我的也是这么做的在火狐上运行得很好，但是Chrome没有看到图形说明的样式width: 100%。
figure {
display: inline-block;
vertical-align: top;
}
img, figcaption {
vertical-align: bottom;
}
figcaption {
width: 100%;
display: table-caption;
background: #f55544;
}请帮忙--我必须完成这件事，但我没有更多的办法来解决这个问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-06-22 16:56:32
这个解决方案使用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/上看到它
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30863257
复制相关文章
相似问题
腾讯云开发者
