当前位置：文江博客话题详情

调整页面大小时防止 div 移动

发布于 2024-12-26 05:54:32 字数 583 浏览 3 评论 0原文

我对 CSS 很陌生，我正在尝试启动并运行一个页面。我成功地生成了我认为不错的页面，直到我调整浏览器窗口的大小，然后一切都开始移动。我不知道为什么会这样！！

当我调整窗口大小时，我希望“对象”保留在原来的位置，但窗口大小要调整。例如，如果我将窗口的底角向上和向左拖动，我希望看到右下角的内容消失并出现滚动条，但左上角的对象将准确地保持在原来的位置。

当我通过向左拖动右侧尺寸来调整浏览器窗口大小时，会发生这种情况。 header和menubar中的内容，都是向下跳转的。然后我尝试了 overflow:hidden;，但据我了解这一切都不是正确的方法。

请在此处找到 HTML 和 CSS。

我已经尝试过这个问题。我尝试为 main 的 div 标题设置 min-width:820px; 。那并没有解决问题。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等风也等你 2025-01-02 05:54:32

1 - 删除 BODY CSS 中的边距。

2 - 将所有 html 包装在包装器

中...所有正文内容

3 - 定义包装器的 CSS：

这会将所有内容组合在一起，并在页面上居中。

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

1 - remove the margin from your BODY CSS.

2 - wrap all of your html in a wrapper <div id="wrapper"> ... all your body content </div>

3 - Define the CSS for the wrapper:

This will hold everything together, centered on the page.

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

回复收藏 0 原文

極樂鬼 2025-01-02 05:54:32

您可以使用两种类型的测量来指定宽度、高度、边距等：相对测量和固定测量。

相对

相对测量的一个例子是您所使用的百分比。百分比与其包含元素相关。如果没有包含元素，则它们是相对于窗口的。

<div style="width:100%"> 
<!-- This div will be the full width of the browser, whatever size it is -->
    <div style="width:300px">
    <!-- this div will be 300px, whatever size the browser is -->
        <p style="width:50%">
            This paragraph's width will be 50% of it's parent (150px).
        </p>
    </div>
</div>

另一种相对度量是 em，它与字体大小相关。

固定

固定测量的一个示例是像素，但固定测量也可以是 pt（点）、cm（厘米）等。固定（有时称为绝对）测量始终尺寸相同。像素始终是像素，厘米始终是厘米。

如果您要对尺寸使用固定测量值，则浏览器尺寸不会影响布局。

There are two types of measurements you can use for specifying widths, heights, margins etc: relative and fixed.

Relative

An example of a relative measurement is percentages, which you have used. Percentages are relevant to their containing element. If there is no containing element they are relative to the window.

<div style="width:100%"> 
<!-- This div will be the full width of the browser, whatever size it is -->
    <div style="width:300px">
    <!-- this div will be 300px, whatever size the browser is -->
        <p style="width:50%">
            This paragraph's width will be 50% of it's parent (150px).
        </p>
    </div>
</div>

Another relative measurement is ems which are relative to font size.

Fixed

An example of a fixed measurement is pixels but a fixed measurement can also be pt (points), cm (centimetres) etc. Fixed (sometimes called absolute) measurements are always the same size. A pixel is always a pixel, a centimetre is always a centimetre.

If you were to use fixed measurements for your sizes the browser size wouldn't affect the layout.

回复收藏 0 原文