Question

我正在寻找一种方法，将2张图像水平放置，每张图像下方的文字都贴在该图像上。这应该是响应。我已尝试过本网站上与此问题相关的其他几个帖子的代码，但没有一个例子适用于我（每个命题都没有把图片放在一个彼此旁边，而是在另一个之下。这就是我的意思到目前为止：

＆＃13;

pygame

＆＃13;

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

＆＃13;

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>

Answer 2

您可以使用bootstrap缩略图获得所需的结果。检查此代码。这将针对320px的所有设备。

＆＃13;

.img {
  width: 100%;
}

＆＃13;

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

＆＃13;

将图像放在一起，下面是文字

2 个答案: