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

CSS HTML positioning

边距如何与 div 定位配合使用？

发布于 2024-07-27 21:49:29 字数 1075 浏览 4 评论 0 原文

#content div 包含大部分网页内容。如下所示，上边距为 280px，因为这是网站标题图像的高度，该图像放置在“正文”中作为背景 (image/sky1.jpg)。

如何将 div 作为支架放置在 #content div 的“边距”上方，以便可以放置我的 #navigation、#Title 标题图像上方的 div？

#content div 上方的 #top-float div 是它的开始，但每次我添加更多的高度时 “保证金”受到影响，将其推低。

我尝试将

之上在 html 中，我应该如何定位它？

html {
    background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
    padding: 0;
    margin: 0;
    background:url(images/sky1.jpg) no-repeat center top;
    color: #666;
    width: 100%;
    display: table; 
}
#top-float{
    padding-left:2.3em;
    padding-right:2.3em;
    height:10em;
}
#content {
    width: 890px;
    margin: 280px auto 0;
    background: #fff;
    border: solid 0px #ccc;
    padding: 0px;
}
#footer {
    width: 890px;
    margin: px auto 0;
    background:url(images/footer-bg.jpg)
    no-repeat center bottom #fff;
    border: solid 0px #ccc;
    height:250px;
}

原文

The #content div holds most of the web content. As you can see below, there is a top margin of 280px, because that is the height of the header image of the site, which is placed in the 'body' as a background (image/sky1.jpg).

How do I position a div as a holder above the 'margin' of the #content div so that I could place my #navigation, #Title divs above the header image?

The #top-float div just above the #content div was the start of it but each time I add more to the height the
'margin' get affected pushing it below.

I tried putting the <div id="top-float></div> above the <div id="content"></div> in the html. Is this how should I position this?

html {
    background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
    padding: 0;
    margin: 0;
    background:url(images/sky1.jpg) no-repeat center top;
    color: #666;
    width: 100%;
    display: table; 
}
#top-float{
    padding-left:2.3em;
    padding-right:2.3em;
    height:10em;
}
#content {
    width: 890px;
    margin: 280px auto 0;
    background: #fff;
    border: solid 0px #ccc;
    padding: 0px;
}
#footer {
    width: 890px;
    margin: px auto 0;
    background:url(images/footer-bg.jpg)
    no-repeat center bottom #fff;
    border: solid 0px #ccc;
    height:250px;
}

分享到QQ

分享到微博

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

发布评论

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

庆幸我还是我 2024-08-03 21:49:29

最简单的方法是将 #top-float 的高度设置为 280px 并降低 #content< 的 top-margin /code> 如下：

<html>
  <head>
    <style type="text/css">
      html {
        background: #73ADD7 url(images/gradient.gif) repeat-x;
      }
      body {
        padding: 0;
        margin: 0;
        background:url(images/sky1.jpg) no-repeat center top;
        color: #666;
        width: 100%;
        display: table;     
      }
      #top-float{
        margin: 0;
        padding: 0 2.3em;
        height:280px;
      }
      #content {
        width: 890px;
        margin: 0 auto;
        background: #fff;
        border: solid 0px #ccc;
        padding: 0px;
      }
      #footer {
        width: 890px;
        margin: 0 auto;
        background:url(images/footer-bg.jpg)
        no-repeat center bottom #fff;
        border: solid 0px #ccc;
        height:250px;
      }
    </style>
  </head>
  <body>
    <div id="#top-float">
    </div>
    <div id="#content">
    </div>
    <div id="#footer">
    </div>
  </body>
</html>

如果您需要 em 大小调整，则为 #top-float 的子级调整 em 大小，并确保给予 #top-float overflow:hidden;

如果您希望内容显示在标记中的标题上方以实现 SEO 目的，您可以执行以下操作：

<html>
  <head>
    <style type="text/css">
      html {
        background: #73ADD7 url(images/gradient.gif) repeat-x;
      }
      body {
        padding: 0;
        margin: 0;
        background:url(images/sky1.jpg) no-repeat center top;
        color: #666;
        width: 100%;
        display: table;     
      }
      #top-float{
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 2.3em;
        height:280px;
      }
      #content {
        width: 890px;
        margin: 280px auto 0;
        background: #fff;
        border: solid 0px #ccc;
        padding: 0px;
      }
      #footer {
        width: 890px;
        margin: 0 auto;
        background:url(images/footer-bg.jpg)
        no-repeat center bottom #fff;
        border: solid 0px #ccc;
        height:250px;
      }
    </style>
  </head>
  <body>
    <div id="#content">
    </div>
    <div id="#footer">
    </div>
    <div id="#top-float">
    </div>
  </body>
</html>

The easiest way would be to give your #top-float a height of 280px and drop the top-margin for #content as such:

<html>
  <head>
    <style type="text/css">
      html {
        background: #73ADD7 url(images/gradient.gif) repeat-x;
      }
      body {
        padding: 0;
        margin: 0;
        background:url(images/sky1.jpg) no-repeat center top;
        color: #666;
        width: 100%;
        display: table;     
      }
      #top-float{
        margin: 0;
        padding: 0 2.3em;
        height:280px;
      }
      #content {
        width: 890px;
        margin: 0 auto;
        background: #fff;
        border: solid 0px #ccc;
        padding: 0px;
      }
      #footer {
        width: 890px;
        margin: 0 auto;
        background:url(images/footer-bg.jpg)
        no-repeat center bottom #fff;
        border: solid 0px #ccc;
        height:250px;
      }
    </style>
  </head>
  <body>
    <div id="#top-float">
    </div>
    <div id="#content">
    </div>
    <div id="#footer">
    </div>
  </body>
</html>

If you need em sizing, then give the children of #top-float em sizing, and make sure to give #top-float overflow: hidden;

If you want your content to appear above your header in your markup for SEO purposes, you can do the following:

<html>
  <head>
    <style type="text/css">
      html {
        background: #73ADD7 url(images/gradient.gif) repeat-x;
      }
      body {
        padding: 0;
        margin: 0;
        background:url(images/sky1.jpg) no-repeat center top;
        color: #666;
        width: 100%;
        display: table;     
      }
      #top-float{
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 2.3em;
        height:280px;
      }
      #content {
        width: 890px;
        margin: 280px auto 0;
        background: #fff;
        border: solid 0px #ccc;
        padding: 0px;
      }
      #footer {
        width: 890px;
        margin: 0 auto;
        background:url(images/footer-bg.jpg)
        no-repeat center bottom #fff;
        border: solid 0px #ccc;
        height:250px;
      }
    </style>
  </head>
  <body>
    <div id="#content">
    </div>
    <div id="#footer">
    </div>
    <div id="#top-float">
    </div>
  </body>
</html>

回复收藏 0 原文

茶底世界 2024-08-03 21:49:29

只需删除内容 div 的上边距，并在其上方添加指定高度的占位符即可。

HTML 片段：

<body>
  <div id="header">Stuff</div>
  <div id="content">Body stuff.../div>
</body>

和 CSS：

#content {
  margin-top:0;
}

#header {
  height:280px;
}

如果将额外的标头信息放在内容 div 内（语义上）更有意义，则可以使用负边距。

HTML 片段：

<body>
  <div id="content">
    <div id="header">Stuff</div>
    Body stuff...
  </div>
</body>

和 CSS：

#content {
  margin-top:280px;
}

#header {
  margin-top:-280px;
}

Just remove the top margin from your content div, and add the placeholder above it with the height specified.

HTML snip:

<body>
  <div id="header">Stuff</div>
  <div id="content">Body stuff.../div>
</body>

And CSS:

#content {
  margin-top:0;
}

#header {
  height:280px;
}

If it makes more sense for the extra header information to be within the content div (semantically), you can use a negative margin.

HTML snip:

<body>
  <div id="content">
    <div id="header">Stuff</div>
    Body stuff...
  </div>
</body>

And CSS:

#content {
  margin-top:280px;
}

#header {
  margin-top:-280px;
}

回复收藏 0 原文

相思故 2024-08-03 21:49:29

在没有看到 HTML 的情况下回答这个问题有点棘手，但有一些建议：

将 #top-float div 放在内容 div 之外
使用负边距
将内容 div 与浏览器顶部齐平，并在其中包含标题 div。然后将标题图像放入标题 div 中作为背景图像，
它看起来不像您将任何内容居中，因此您也可以对标题 div 使用绝对定位

一如既往，没有一种方法可以实现此目的。

回复收藏 0 原文

又爬满兰若 2024-08-03 21:49:29

您可能希望为 #top-float div 使用绝对或固定定位。

为什么要把标题图片作为背景图片呢？我想您会发现，如果您不将网站的标题图像作为背景，一切都会变得更容易。单击网站的徽标（我假设位于您的标题图像中）会将用户带回主页也是常见的做法。将网站的徽标设置为背景图像会有效地禁用此功能。

回复收藏 0 原文

~没有更多了~

关于作者

初见终念

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

边距如何与 div 定位配合使用？

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

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

边距如何与 div 定位配合使用？

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

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

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