Question

我有 banner-image ，在该图片上我放置了链接。当我放大或缩小浏览器窗口或调整大小时，此页面无法正确对齐。

在默认视图（100％缩放）中显示的图像相对于图像没有正确对齐。

如何使此链接响应？我希望阅读更多按钮正好位于文本使用..... 文本创建驱动值以及阅读更多链接的正下方对其所在的图像作出响应。我怎么能这样做？

   <p class="homeImageLink">
       <span><a href= "#" class="full_close">Read More</a></span>
   </p>

请帮忙。

Answer 1

我不确定这会有效，但我认为它会：

.image_container span
{
    margin-left:-100px;

}

Answer 2

你需要调整你的CSS，以便定位更清晰，我fixed it somewhat here。

重要的部分在这里：

.image_container {
    position: relative;
}   

.homeImageLink {
    position: absolute;
    bottom: 10%;
    right: 3%;
}

在容器上，position: relative;表示任何内部定位都可以在此容器中运行。除静态之外的任何定位都可以在这里完成，并且重要的是树中的中间元素没有位置设置，或者它将从该元素起作用。

链接容器本身为position: absolute;，其%值用于使其与容器的大小成比例。另请注意，right代替left，因此元素相对于容器右侧显示。现在它永远不会偏离图像的右侧。

为了使这个更清楚，我已经从示例中移除了所有其他css，你可以看到它仍然展示了你想要的效果。