将图像并排放置，并在下方显示文字答案

【问题标题】：placing images next to each other with text below将图像并排放置，并在下方显示文字
【发布时间】：2017-10-31 01:39:40
【问题描述】：

我正在寻找一种将 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>

【问题讨论】：

您现在所拥有的将图像放在水平行中，下方有文本，并且所有内容都是响应式和可缩放的。您能否更具体地说明什么不起作用以及您想要实现什么？
您好，这些图像不会彼此相邻，而是彼此下方。我真的希望它们并排放置。
他们在我身边看着我i.imgur.com/P0b0U2f.png
是的，我的意思是在我的网站上 :-)
我已将 css 放在 Google 标签管理器中，因为我无法访问网站代码 (CMS = Drupal)。这可能是它无法正常工作的原因吗？

标签： css image css-float

【解决方案1】：

使用弹性盒

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>

【讨论】：

【解决方案2】：

您可以使用引导缩略图来获得所需的结果。检查此代码。这将针对 320 像素以上的所有设备。

.img {
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">

  <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12">

    <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
      <div class="thumbnail">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8dwkxQJ8PkFjeU8fb1bIXtEcsqoIoRztPOCWPnRb1np9iO0e2341WWqoj" class="img">
        <div class="caption">
          <h4>Name</h4>
          <h4>Description</h4>
        </div>
      </div>
    </div>

  <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
    <div class="thumbnail">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8dwkxQJ8PkFjeU8fb1bIXtEcsqoIoRztPOCWPnRb1np9iO0e2341WWqoj" class="img">
      <div class="caption">
        <h4>Name</h4>
        <h4>Description</h4>
      </div>
    </div>
  </div>

</div>

</div>

【讨论】：