定位图像

Question

所以，我正在尝试做这样的事情：

该网页应该看起来像电话应用程序，并且必须具有响应能力。 问题是我无法正确定位按钮。 每当我调整浏览器窗口大小时，它们始终相对于“平板电脑”移动。 这是我尝试过的（只有一个按钮）：

CSS

img {
max-width: 100%;
}
#tabletBG {
width : 60%;
}
#buttons{
position:absolute;
width:10%;
left:40%;
top:12%;
}

HTML

<div id="content">
    <div id="tablet">
        <img id="tabletBG" src="images/tablet.png" alt="tabletBG"></img>
        <div id="buttons">
            <img id="quienes" src="images/quienes.png" alt="quienes"></img>
        </div>
    </div>

</div>

我只希望按钮贴在平板电脑上。 即使我正在调整浏览器窗口的大小。 有更简单的方法吗？ 谢谢。

Answer 1

关于上述原始问题：

尝试将content div的position设置为absolute ， fixed或relative 。

这将确保您包含在其中的绝对定位buttons div将其用作参考点，而不是将其调整大小/重新定位指向窗口。

演示： http : //jsbin.com/tixed/1/

关于您的以下评论：

它有效，但在一定程度上。 有一点是，如果您继续扩展浏览器窗口，平板电脑将继续扩展，但按钮不会扩展。 这是一个链接 。

问题在于您的图像只有96像素宽，并且您已为所有img元素设置了CSS规则，以使其具有max-width: 100% 。 在这种情况下，图像将仅扩展到其原始大小的点（默认操作，而不是您想要的）， 并且仅扩展到其包含元素的点（根据CSS规则，不会有明显的效果）。

要更正，理想情况下，您将获得更大的图像。 为了快速解决，请将其规则更改为width: 100% 。 这将确保图像始终扩展到其包含元素的位置。

Answer 2

是的，每当您调整浏览器大小时，图像都会改变其对齐方式，这是浏览器的默认行为。 只有您可以使此图像浮动。

尝试这个：

img{
  float: left;
}