Question

我在父div中定位图像时遇到了一些问题。我在父div中并排有2个div，容器中的第一个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没有固定的高度。

谢谢，任何帮助都会得到满足。

Answer 1

那应该做的工作。实际上，你的容器根本没有高度，里面有2个浮动的div。我使用了一个明确的：两个......清除浮子并给容器适当的高度。

<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

找到更多关于花车的信息并清除

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

1 个答案: