将图像和标题合并到一个 flex 项目中？

Question

AI 想把一张图片和它的标题放在一个 flex-item 中，并且在一个 flex-container 中有几个这样的 flex-item。我希望图片位于标题上方。但实际情况是，每个标题都在旁边它的图像。我怎样才能让他们一个比另一个高？

我尝试将字幕放入图像下方的另一个 flex-container 中。但是当屏幕尺寸较小时，图像堆叠，然后字幕堆叠而不是图像，然后是它的标题，图像，然后是它的标题。

<div class="flex-item-popup" id="popup">
    <div class="close"><i class="fa fa-2x fa-times-circle"></i></div>
    <h2></h2>
    <div class='text'></div>
    <div class="videos"></div>
    <div class="flex-container images"></div>
    <div class="flex-container captions"></div>
</div>

css:

 #popup {
    width: 90%;
    height: auto;
    padding: 20px;
    border-radius: 10px;
    background-color: black;
    color: white;
}
#popup .close {
    /*position: absolute;
    right: 10px;
    top: 10px;*/
    float: right;
    color: white;
    opacity: 1;
}
#popup .close:hover {
    opacity: .7 !important;
}
.images, .captions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}
.images {
    margin-top: 20px;
}
.images .flex-item, .captions .flex-item {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 300px;


}

Answer 1

查看 <figure> 和 <figcaption> HTML5 标签。我很确定这会对您有所帮助，而这正是您要找的。

Here is updated fiddle link.

SO 代码片段在这里...

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  align-items: center;
}
.flex-item {
  /*width: 350px;
  height: null;*/
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 200px;
  justify-content: flex-start;
  display: flex;
  padding-left: 20px;
}
.flex-item img {
  cursor: pointer;
}

<div class="flex-container images">
  <div class="flex-item">
    <figure>
      <img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/grads.jpg" />
      <!--<div style="clear: both;"></div>-->
      <figcaption>Our grads.</figcaption>
    </figure>
  </div>
  <div class="flex-item">
    <figure>
      <img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/building.jpg" />
      <figcaption>A building</figcaption>
    </figure>
  </div>
  <div class="flex-item">
    <figure>
      <img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/campus.jpg" />
      <figcaption>The campus.</figcaption>
    </figure>
  </div>
  <div class="flex-item">
    <figure>
      <img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/trio.jpg" />
      <figcaption>Three people</figcaption>
    </figure>
  </div>
</div>

希望对您有所帮助

将图像和标题合并到一个 flex 项目中？

get image and caption into one flex item?

css

flexbox