如何将图像定位在侧（左）div的底部？

Question

我的标题并不是描述问题的最佳方式。

我有两个 div。左 div 和右 div，我知道如何使它们具有相同的高度，但问题是我必须将图像放在左 div 的底部，如果高度在右侧，图像必须始终位于底部div 变化。

希望你能理解我的问题。

Answer 1

在左侧 div 上使用背景图片并将其放置在左下方。

div.left-div {
  background: url(image.jpg) bottom left no-repeat;
  padding-bottom: 200px; /* change this to the height of the image */
}

Answer 2

您可以使用绝对定位。但更现代的方法是将flexbox 与margin-top: auto; 一起使用。

#example
{
  display: flex;
}

#one
{
  display: flex;
}

#one img
{
  margin-top: auto;
}

<div id="example">
<div id="one">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
</div>
<div id="two">
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height<br />
This div has a big height
</div>
</div>

Answer 3

如果您在 html 中使用图像，则可以使用position 如下代码，如果您使用背景图像，则使用@Aaron 回答。

*{margin:0;padding:0;}
  .wrap{
    min-height:300px;
    width:450px;
    position:relative;
    border:1px solid #ccc;
    padding-bottom:150px;
    
  }
  .innerBox{
    margin-bottom:10px;
  }
  figure{
    position:absolute;
    bottom: 0;
    right:0;
  }
  figure img{
    display:block;
  }

<div class="wrap">
    <div class="innerBox">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
     exercitationepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    
    <figure>
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    </figure>
  </div>

希望对你有帮助。