Question

我想在一个html网站上添加三个图片：连续两个，中间位于它们之下，还希望保持移动兼容。如果有人有解决方案，请帮助我。我已经搜索过，但没有找到任何解决方案兼容性和图像的正确顺序。

Answer 1

我求你这么做。

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

看看这个，这是你需要的吗？我使用了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>

Answer 3

执行此操作的最佳方法是使用 bootstrap 类

Bootstrap Grid Examples

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

网站中的3张图片

3 个答案: