2

我正在尝试将标注图像附加到页面的右上角，但是一旦屏幕低于某个宽度，我不希望它移动，否则它将开始与其他页面元素重叠。有谁知道最好的方法是什么？谢谢！

4

1 回答 1

0

标准 CSS 实践告诉我们页面上的每个元素都应该封装为一个块：

<div style="float:left;">
    <div style="float:left;">
        <img src="picture.png" />
    </div>
</div>

这种样式允许元素相互堆叠，防止重叠。

在您的情况下，听起来您有一个标题，并且您需要在右上角固定一张图片：

<div id="header" style="width:100%;float:left;">
    <div style="float:right;">
        <img src="picture.png" />
    </div>
</div>

<!-- continue stacking elements to build your page -->

<div id="content" style="width:100%;float:left;">
    Hey, this stuff works!
</div>

但是你也提到你的页面应该有一个最小宽度，这样当用户试图缩小宽度时，元素不会水平重叠：

<body style="min-width:800px;">

    <div id="header" style="width:100%;float:left;">
        <div style="float:right;">
            <img src="picture.png" />
        </div>
    </div>

    <!-- continue stacking elements to build your page -->

    <div id="content" style="width:100%;float:left;">
        Hey, this stuff works!
    </div>

</body>
于 2012-09-28T15:56:50.667 回答