网站中的3幅图片

Question

我想在一个html网站中添加三张图片:两张在一排，一张在中间，另一张在中间，还想保持它的移动兼容性。如果有人有解决办法，请帮助我。我已经搜索过了，但是没有找到任何兼容性的解决方案，也没有找到符合顺序的图像。

Answer 1

最好的方法是使用引导类。

引导网格示例

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6 col-xs-6">
      <div class="thumbnail">
          <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">
      </div>
    </div>
    <div class="col-md-6 col-xs-6">
      <div class="thumbnail">
          <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">
      </div>
    </div>
  </div>
  <div class="row">
      <div class="col-md-12 col-xs-12">
      <div class="thumbnail">
          <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg"  style="width:100%">
      </div>
    </div>
  </div>
</div>

​

Answer 2

我知道你在找这个。

<div class="row">
<div class="col-sm-12">
    <div class="col-sm-6 pull-left"><img src=""/></div>
    <div class="col-sm-6 pull-right"><img src=""/></div>
    <br>
</div>
<div class="col-sm-12" style="margin: auto"></div>
</div>

Answer 3

看看这个，这是你需要的吗？我用过display:inline-block和text-align:center

​

.img_container {
  width: 100%;
  float: left;
  text-align: center;
}
.img_container div {
  display: inline-block;
  width: 49%;
}
.img_container div img {
  width: 100%;
}

<div class="img_container">
   <div>
      <img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg" alt="image" />
   </div>
   <div>
      <img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg" alt="image" />
   </div>
   <div>
      <img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg" alt="image" />
   </div>
</div>

​