html - CSS图像位置

Question

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

标签： htmlcsstwitter-bootstrap

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>