Question

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

Answer 1

标准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>

将图像固定在右上角，但设置最小页面宽度

1 个答案: