Question

请参阅以下链接

你可以看到标题上有一个文字（标题是图像）文字是： mail@yahoo.com（此文字是图片的一部分）

我将标题图片的那部分转换为与以下代码链接

<div id="hw"><div id="header"><img src="test.jpg" /><a href="#" id="ResponsiveLink"></a></div></div>

这是#link

#ResponsiveLink {
    width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}

我们如何才能使该链接在其他设备中响应？例如，当浏览器位于#ResponsiveLink id的标记的较窄位置时，我希望它固定在我的文本上。

Answer 1

我知道的最好方法是不要将屏幕的很大一部分用作图像。另一方面，您可能不希望将图像切割成几个单独的图像。所以，我建议使用CSS Sprit。

分离图像后，您可以使用浮动，清除和百分比宽度将零件放在彼此旁边，或使用像bootstrap这样的框架。

如果您仍然希望将图像作为整个标题使用，则在一个完全不推荐的HTML标记中，使用#ResponsiveLink的百分比顶部就可以了。您应该只为其所有父项添加width: 100%：header，hw和wrapper。

发表评论后：

#ResponsiveLink {
    background: none repeat scroll 0 0 #FF0000;
    display: block;
    height: 0;
    left: 58%;
    margin-left: 0;
    margin-top: 7%;
    padding-bottom: 3%;
    position: absolute;
    top: 0;
    width: 25%;
}

这将解决问题，因为位置和保证金百分比之间存在差异，最高百分比是使用第一个绝对父母的高度计算的，但保证金和填充百分比是使用父母的宽度计算的。最大宽度仍然存在问题，您可以修复在#head内添加包装，宽度为100％且没有最大宽度。

使用浮动和分离图像的另一个尝试有太多问题要写在这里，抱歉。

Answer 2

您目前正在构建的内容不是一个可持续的解决方案，您肯定会看到有关如何改进网站布局的其他回复。

但是，如果您需要临时解决方案，则以下CSS更改将适用于您当前的页面：

#header {
    margin: 0 auto;
    max-width: 980px;
    position: relative;
}

#ResponsiveLink {
    background: none repeat scroll 0 0 #FF0000;
    display: block;
    height: 30%;
    left: 60%;
    position: absolute;
    right: 12%;
    top: 37%;
}

完整的背景和响应

2 个答案: