캡션에 이미지가있는 두 div의 캡션을 가져 와서 캡션에 텍스트 줄 바꿈이 포함되도록하려면 어떻게해야합니까?

저는 이미지를 표시하는 응용 프로그램을 가지고 있습니다. 하나는 큰 이미지이고 다른 하나는 작은 이미지입니다. (본질적으로 두 개의 열) object-fit : 왼쪽의 큰 이미지에 대한 표지이므로이 div의 너비를 모른다. 내가 폭을 알고있는 바로 그 길이는 고정 된 폭으로한다. 여기캡션에 이미지가있는 두 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/

출처

2017-01-22 Unipsycho