定位图像

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

关于您上面的原始问题：

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

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

DEMO：http://jsbin.com/tixed/1/

关于您的评论如下：

  

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

问题是您的图片只有96像素宽，并且您已为所有img元素设置了CSS规则，以便拥有max-width: 100%。在这些条件下，图像将仅扩展到其原始大小（默认操作，而不是您想要的），和仅扩展到其包含元素的点（根据您的CSS规则，并且没有明显的影响）。

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

Answer 2

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

试试这个：

img{
  float: left;
}