如何在一个侧面（左）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

您可以使用position如下面的代码，如果你在使用HTML和图像，如果您使用背景图片，然后用@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>

我希望它会帮助你。