Position image at bottom of variable height div

问题

I am having some issues positioning an image within a parent div. I have 2 divs side by side both within a parent div, the first div within the container contains text and the second contains an image. The parent container has no height specified so it adjusts to the height of the content contained within it. I am struggling to absolutely position the image in the 2nd div to the bottom. Below is my HTML and css...

<style>
    .container{
        width: 100%;
    }
    .box{
        float: left;
        width: 49%;
    }
</style>

<div class="container">
    <div class="box text">
        <p>Text placed here</p>
    </div>
    <div class="box image">
        <img src="xxx" />
    </div>
</div> 

I have tried to give .image a relative position and then give the img tag within it 'position: absolute: bottom: 0px;' however this does not seem to work as .image has no fixed height.

Thanks, any help would be appriciated.

回答1:

That should do the work. In fact, your container has no height at all with 2 floated div inside of it. I use a clear:both to... clear the floats and give the container the proper height.

<style>
    .container{
        width: 100%;
        position: relative;
    }
    .box{
        float: left;
        width: 49%;
    }
    .image img {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .clear { clear: both; }
</style>

<div class="container">
    <div class="box text">
        <p>Text placed here</p>
    </div>
    <div class="box image">
        <img src="xxx" />
    </div>
    <div class="clear"></div>
</div> 

You can find more infos about floats and clear on this nice article on css-tricks.com

来源：https://stackoverflow.com/questions/24722890/position-image-at-bottom-of-variable-height-div