如何在 HTML5 中将 DIV 标签图像放置在页面的最顶部?

发布于 2024-08-29 15:37:00 字数 250 浏览 9 评论 0原文

我试图通过在 CSS 中使用背景图像来放置图像的 x 重复“网格”,然后在 DIV 标记中使用 id。我的意图是放置一种“面板”,然后始终延伸到页面的最顶部,并使用repeat-x循环。它在没有 DOCTYPE 的情况下工作得很好,但是当我将 clean 放入代码中时,它会将标签中的图像向下推,就好像页面顶部有大约 15 px 左右的边距。我尝试了上边距、z-index,但没有成功。

如果我问了一个愚蠢的问题,请原谅,但我是个新人。

谢谢, -雅各布

I'm trying to put an x-repeat "grid" of images by using background-image in CSS, then using the id in a DIV tag. My intention is to put a sort of "panel", then always extends to the very top of the page, and loops with repeat-x. It works just fine without a DOCTYPE, but when I put the clean in the code, it pushes the image in the tag downwards, as if there's a margin on the top of the page of about 15 px or so. I tried top-margin, z-index, with no success.

Excuse me if I'm asking a silly question, but I'm sort of new.

Thanks,
-Jacob

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

知足的幸福 2024-09-05 15:37:00

从您的描述中不清楚您使用哪种方法将面板放置在页面顶部,但在我看来,您的面板 div 放置在 HTML 代码中的 body 元素的最顶部,如下所示

    <body>
          <div id="yourid">
[...]
          </div>

:如果是这种情况,您可能会受到浏览器中正文和/或 html 元素的边距和/或填充的默认设置的影响(以及它们在浏览器模式之间的差异 - 即有或没有 doctype -在某些浏览器中)。

这些的默认设置因浏览器而异 - 解决该问题的常见方法是重置它们 - 例如:

html,body {margin:0; padding:0}

如果这对您没有帮助,请提供更多详细信息(即代码或指向受影响的页面)

It's a bit unclear from your description exactly which method you use for putting your panel at the top of your page, but it seems to me that your panel div is placed at the very top of the body element in yoor HTML code like this:

    <body>
          <div id="yourid">
[...]
          </div>

and if that is the case, you're probably suffering from the default settings for margin and/or padding for the body and/or html elements in your browser (and how they might differ between browser modes - ie. with or without the doctype - in some browsers).

The default settings for these vary between browsers - and a common way to work around that problem is to reset them - for example like this:

html,body {margin:0; padding:0}

If this doesn't help you, please supply some more details (ie. code or a link to the affected page)

埋情葬爱 2024-09-05 15:37:00

所有现代网页都需要文档类型。这听起来就像你在与盒子模型作斗争,而你没有盒子模型。如果没有文档类型,你就会处于怪癖模式,一切都会变得混乱。

A doctype is required of all modern web pages. This sounds like you are fighting the box model when you don't have one. Without a doctype, you are in quirks mode, and all hell breaks loose.

眼泪都笑了 2024-09-05 15:37:00

如果浏览器在标准模式下运行(这是您想要的,并且由良好的文档类型触发),则 元素上有一些边距或填充。使用 body { margin:0;填充:0; } 将其清除并让您的元素填满整个屏幕。

If a browser is operating in standards-mode (which you want, and which is triggered by having a good doctype), then the <body> element has some margin or padding on it. Use body { margin:0; padding:0; } to clear it out and have your elements fill the entire screen.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文