如何在两个带有图像的 div 下方获取标题，以便标题具有文本换行？

Question

我有一个应用程序，我可以在其中显示图像，一个是大的，然后是旁边的一系列较小的图像。（所以基本上是两列）我正在使用 object-fit:cover 作为左侧的大图像，所以不知道这个 div 的宽度。右边我知道宽度，因为我强行把它设为固定宽度。

<div class="browseCardBody">
  <div class="browseCardImageLarge">
     <img src="https://i.imgsafe.org/4242b5ed94.jpg">
   </div>
    <div class="browseCardSmallImages">
   <div style="width:133px">
    <div class="browseCardImageSmall">
    <!-- This main image scales to 300px high, varying width, how do get the text under it to match the width of this plus the fixed width div beside it??   -->
    <img src="http://i.imgur.com/obwbqDT.jpg" />
    <img src="https://steemitimages.com/300x300/https://ipfs.io/ipfs/QmZ42wQdhPwjmhvkmQWbRRuCy1KWM2Ss95Njm5mGJijq6E/20170121_160538.jpg" />
    <img src="https://steemitimages.com/300x300/http://i.imgur.com/Oe9Yshv.jpg" />
    </div>
   </div>
</div>

</div>
<div>
   <div class="browseCardFooter" ng-if="story.body.length > 0">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
</div>

CSS 此处：

.browseCardBody {
    display: flex;
    max-height: 300px;
}
.browseCardBottom li {
    border-right: 1px solid rgba(0,0,0,.1);
    float: left;
    vertical-align: middle;
    font-size: 16px;
    padding: 6px;
}
.browseCardImageLarge {
    object-fit: contain;
    flex-grow: 0;
    order: 1;
}
.browseCardImageLarge img 
{
    height: 300px;
    object-fit: cover; 
}
.browseCardSmallImages {
    overflow: hidden;
    flex-grow: 10;
    order: 2;
    height: 300px;
}
.browseCardImageSmall {
    object-fit: cover;
    display:inline-block;    
}
.browseCardImageSmall img {
    height: 100px;
    object-fit: cover;
    width: 133px;
    vertical-align: bottom;
}

我需要在这两列图像下方制作一个与宽度匹配的文本块，而不会使整个容器变宽。

当我的文本比 div 长时，总是加宽容器，我如何在不知道 div 宽度的情况下防止这种情况发生？

我的 jsfiddle 在这里显示了问题： https://jsfiddle.net/tseqjc72/

Answer 1

将整个东西包裹在 div 中并给它一个 class "container" （随便命名 :p ）

现在用 "display: table-caption;"

设计这个 class 容器的样式

我认为这应该可行。

Answer 2

将图像和文本包装在自己的容器 div 中，并使用 display: table-caption。

JSFiddle - Example

如何在两个带有图像的 div 下方获取标题，以便标题具有文本换行？

How to get a caption underneath two divs with images in them so the caption has text wrapping?

css

word-wrap