css - 将图像左上、居中和右下对齐

Question

我想将图像放在图中所示的 div 中。一个应该与左上对齐，一个与中心对齐，一个与右下对齐。宽度和间隙也需要根据窗口大小调整大小。实现这一目标的最佳方法是什么？

Answer 1

只需使用位置样式即可。

<style type="text/css">
  div {
    width: 100%;
    height: 200px;
    position: relative;
  }
  #img1 {
    position: absolute;
    top: 0;
    left: 0;
  }
  #img2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  #img3 {
    position: absolute;
    bottom: 0;
    right: 0;
  }
</style>
   

<div>
  <img id ="img1" src="http://lorempixel.com/200/100/">
  <img id ="img2" src="http://lorempixel.com/200/100/">
  <img id ="img3" src="http://lorempixel.com/200/100/">
</div>