我有一个带有标题和内容 div 的简单示例。我希望标题 div 之后有 10 像素的边距,但它显示在内容 div 之后。标题 div 有两个 float 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 下方。
最佳答案
<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
关于css - margin-bottom 没有出现在正确的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8423560/