可变高度div底部的位置图像 [英] Position image at bottom of variable height div

问题描述

我在父div中放置图片时遇到一些问题。我有两个div在一个父div内并排，容器中的第一个div包含文本，第二个包含一个图像。父容器没有指定高度，因此它会调整其中包含的内容的高度。我努力将图像绝对定位在第二个div到底部。下面是我的HTML和CSS ...

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> 

我试图给.image一个相对位置，然后给它的img标签位置：绝对：底部：0px;'然而这似乎不工作.image没有固定的高度。

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.

推荐答案

这应该做的工作。事实上，你的容器没有高度，它有2个浮动的div。我使用一个清楚的：两个...清除浮动和给容器适当的高度。

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> 

您可以找到更多关于浮动的信息，并在关于css-tricks.com的这篇精彩文章

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

这篇关于可变高度div底部的位置图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！