将图像定位在可变高度 div 的底部答案

【问题标题】：Position image at bottom of variable height div将图像定位在可变高度 div 的底部
【发布时间】：2014-07-13 21:02:25
【问题描述】：

在父 div 中定位图像时遇到一些问题。我在父 div 中并排有 2 个 div，容器中的第一个 div 包含文本，第二个包含图像。父容器没有指定高度，因此它会根据其中包含的内容的高度进行调整。我正在努力将第二个 div 中的图像绝对定位到底部。下面是我的 HTML 和 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 标签 'position: absolute: bottom: 0px;'但是这似乎不起作用，因为 .image 没有固定的高度。

谢谢，如有任何帮助，我们将不胜感激。

【问题讨论】：

标签： css css-position

【解决方案1】：

这应该做的工作。事实上，你的容器根本没有高度，里面有 2 个浮动 div。我使用 clear:both 来...清除浮动并为容器提供适当的高度。

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

你可以在this nice article on css-tricks.com找到更多关于float和clear的信息

【讨论】：

很高兴能帮到你！