css - 将图像与下面的文字并排放置

Question

我正在寻找一种方法，将 2 张图片水平并排放置，并在每张图片下方放置与该图片相关的文本。这应该是响应式的。我已经尝试过该网站上与此问题相关的其他几篇文章的代码，但是这些示例都不适合我(每个提议都没有将图片放在一起，而是放在另一张下面。这就是我得到的远:

#design-cast {
    position: relative;
    overflow: hidden;
}

.member {
    float: left;
    width: 40%;
    margin: 1% 1% 45px 1%;
}

.name {
    position: absolute;
    bottom: 0px;
}

.member img {
    width: 40%;
    display: block;
}

<div id="design-cast">
    <div class="member">
        <img width="40%" src="image-02.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
    <div class="member">
        <img width="40%" src="image-02.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>  
</div>

Answer 1

使用 flexbox

body {
  margin: 0
}

#design-cast {
  display: flex;
  flex-wrap: wrap;
}

.member {
  flex: 0 48%;
  margin: 1% 1% 45px 1%;
}

.member img {
  max-width: 100%;
  display: block;
}

@media (max-width:480px) {
  .member {
    flex: 0 100%
  }
}

<div id="design-cast">
  <div class="member">
    <img src="//placehold.it/1000" class="img-responsive img-thumbnail" alt="Responsive image" />
    <div class="name">Name
      <br />Description</div>
  </div>
  <div class="member">
    <img src="//placehold.it/1000" class="img-responsive img-thumbnail" alt="Responsive image" />
    <div class="name">Name
      <br />Description</div>
  </div>
</div>