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

我希望它會幫助你。