CSS图像位置

Question

我需要帮助来创建图像中的图像对齐方式。

Answer 1

使用display:flex;将它们设置在同一行中，并将margin-top设置为所需的img

.wrap{
display:flex;
}
img{
width:337px;
height:235px;
padding: 5px;
}
.down{
    margin-top: 100px;
}

<div class="wrap">
  <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
  <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" class="down"/>
  <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>

以boostrap 3作为您的评论：

查看此处：https://jsfiddle.net/bfcs2670/2/

.down{
 margin-top: 100px;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <div class="container">
    <div class="row"> 
      <div class="col-sm-4"> 
        <img class="Asset-99" src="https://material.angular.io/assets/img/examples/shiba1.jpg" style="width: 100%"> 
      </div> 
      <div class="col-sm-4 down"> 
        <img class="Asset-100" src="https://material.angular.io/assets/img/examples/shiba1.jpg" style="width: 100%;"> </div> 
      <div class="col-sm-4"> 
        <img class="Asset-101" src="https://material.angular.io/assets/img/examples/shiba1.jpg" style="width: 100%"> 
      </div> 
    </div>
</div>