Question

AI想要将图像及其标题放入一个flex项中，并在一个flex容器中放置几个这样的flex项。我希望图像高于其标题。但是，每个标题都在旁边其图像。我如何让它们一个接一个？

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

<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代码片段......

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

希望这有帮助

将图像和标题放入一个弹性项目中？

1 个答案: