流体布局中的 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 的右上方。这就是你想要做的？