margin-bottom 没有出现在正确的位置

发布于 2024-12-20 06:04:16 字数 985 浏览 1 评论 0原文

我有一个带有标题和内容 div 的简单示例。我希望标题 div 之后有 10 像素的边距，但它显示在内容 div 之后。标题 div 有两个浮动 div。以下是代码：

<style type="text/css"
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>

<div id="container">
    <div id="header">
        <div id="title">Header Title</div>
        <div id="link" style="float:right;">
            <a href="http://www.apple.com" target="_blank">Link</a>
        </div>
        <div id="header_clear"/>
    </div>
    
    <div id="content" style="background-color:brown;">
        This is the body.
    </div>
</div>

这是它的样子。您可以看到 10px 边距位于内容 div 下方，而不是标题 div 下方。

显示问题的屏幕截图

边缘底部不工作

原文

I have simple example with a header and content divs. I want there to be a 10 pixel margin after the header div, but it is showing up after the content div. The header div has two floating divs. Following is the code:

<style type="text/css"
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>

<div id="container">
    <div id="header">
        <div id="title">Header Title</div>
        <div id="link" style="float:right;">
            <a href="http://www.apple.com" target="_blank">Link</a>
        </div>
        <div id="header_clear"/>
    </div>
    
    <div id="content" style="background-color:brown;">
        This is the body.
    </div>
</div>

Here's what it looks like. You can see that the 10px margin is below the content div instead of the header div.

screen capture showing the issue

margin-bottom not working

分享到QQ

分享到微博

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

发布评论

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

冬天的雪花 2024-12-27 06:04:16

<style type="text/css">
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>

<div id="container">
 <div id="header">
    <div id="title">Header Title</div>
    <div id="link">
        <a href="http://www.apple.com" target="_blank">Link</a>
    </div>
    <div id="header_clear"></div>
 </div>

 <div id="content" style="background-color:brown;">
    This is the body.
 </div>
</div>

似乎不喜欢自动关闭 div

<style type="text/css">
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>

<div id="container">
 <div id="header">
    <div id="title">Header Title</div>
    <div id="link">
        <a href="http://www.apple.com" target="_blank">Link</a>
    </div>
    <div id="header_clear"></div>
 </div>

 <div id="content" style="background-color:brown;">
    This is the body.
 </div>
</div>

Seems it didnt like the self closing div

回复收藏 0 原文

~没有更多了~