Question

所以我非常了解绝对/相对定位是如何工作的，并且过去曾广泛使用它。现在，我确实有一个网站，我需要在其中定位一个图形元素，以便它能够“粘贴”。无论网站/屏幕尺寸如何，到底部。

我能够为自己的屏幕尺寸做到这一点，但每当高度不同（更大）时，元素（2个红色图像，如示例中所示）只是浮动＆＃39;在网站的中间，而不是它应该的底部。

代码：

    <div class='fimage'>
    </div>
    <div class='fimage2'>
    </div>

CSS

    .fimage{
        background-image: url(img/fimage.png);
        height: 236px;
        width: 50%;
        background-repeat: no-repeat;
        float: left;
}

.fimage2{
        background-image: url(img/fimage2.png);
        height: 236px;
        width: 50%;
        background-repeat: no-repeat;
        float: right;
}

请注意，我有两个单独的图像左/右。代码现在没有任何定位，因为我无法正确地弄清楚它并且总是搞砸了整个布局。

你能否就如何定位元素给我建议，让它们保持在底部？感谢。

Answer 1

杀死花车并绝对定位，底部和右侧（或左侧）设置为0。

.fimage {
    background-image: url(img/fimage.png);
    height: 236px;
    width: 50%;
    background-repeat: no-repeat;
    position:absolute;
    bottom:0;
    left:0;
}
.fimage2 {
    background-image: url(img/fimage2.png);
    height: 236px;
    width: 50%;
    background-repeat: no-repeat;
    position:absolute;
    bottom:0;
    right:0;
}

网站内的绝对与相对元素定位

1 个答案: