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;一起使用。

＆＃13;

#example
{
  display: flex;
}

#one
{
  display: flex;
}

#one img
{
  margin-top: auto;
}

＆＃13;

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

＆＃13;

Answer 3

如果您在html中使用图片，并且如果您使用背景图片，则可以使用下面代码中的position，然后使用@Aaron answer。

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

我希望它会对你有所帮助。

如何将图像放在侧面（左）div的底部？

3 个答案: