нижнее поле не отображается в нужном месте - PullRequest
Новая
       35

нижнее поле не отображается в нужном месте

2 голосов
/ 08 декабря 2011

У меня есть простой пример с заголовком и содержимым 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.

screen capture showing the issue

margin-bottom не работает

1 Ответ

3 голосов
/ 08 декабря 2011 
<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

...