html - 流体布局中的 CSS 定位和偏移

Question

我有一个包含一些内容的包装 div。这是它的 CSS:

.wrapper{
    width: 85%;
    min-width: 970px;
    max-width: 1500px;
    margin: auto;
    padding: 0.3%;
}

现在，在这个 div 中，我有另一个 div，我称之为 div2。它没有相关的样式，除了装饰样式(背景、字体颜色等)。它的行为是简单地占据包装器 div 的整个宽度，而不管浏览器的宽度、缩放或屏幕尺寸是什么。这符合预期，这里没有任何问题。我正在尝试对此进行补充，这就是我遇到麻烦的地方。

我有一张我想显示的图片，这样图片的底部与 div2 的顶部成一直线并接触到 div2 的右端，这样图片的右端也在与 div2 的右端对齐。

这听起来很简单，但我不希望这张图片弄乱垂直空间。添加图像当然会在 div2 和它上面的任何元素之间引入更大的间隙，这意味着我必须使用 position:absolute 将图像从页面的常规流中取出。然而，我试图将图像保持在同一位置，与描述的一致，但没有成功。如何在所有可能的用户显示情况下始终保持此图像对齐，而不会出现这么大的间隙？

我试过使用偏移 CSS top 和 left 来移动图像，但它不适用于所有屏幕/缩放/分辨率/浏览器宽度，这不是我可以实际使用媒体查询的东西。

Answer 1

我不太确定我是否理解正确，但我想您需要:

#div2
{
   position: relative;
   width: 100%;
   overflow: visible;
}

#div2 img
{
   position: absolute;
   bottom: 100%;
   right: 0;
}

编辑:将您的图像放在#div2 中。

因此，您的图片将始终位于#div2 的右上角。这就是你想做的？