什么让这些元素不被某些div内？

我的HTML代码发生了一些有趣的事情，我希望有人能够解释这里发生的事情。什么让这些元素不被某些div内？

我有一个非常简单的网站，有一个容器div，头div和身体div，它看起来像html元素没有响应divs（他们不会在他们之间的div html标记）。

想知道为什么它的行为如此。

下面是HTML：

<html> 
<head> 
<title>Andy</title> 

<link rel="stylesheet" href="style-andy.css" type="text/css" media="screen" /> 

</head> 

<body> 

<div id='container'> 

    <div id='header'> 
    <h1>Andy </h1> 
    </div> 
    <div id='image'> 
    <img src='main.jpg' /> 
    </div> 
</div> 


</body> 
</html>

这里是CSS：

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

#container 
{ 
    width:1024; 
    margin:0 auto; 
} 

#header 
{ 
    width:1024; 
    padding-bottom:10px; 
    border:1px solid black; 
} 
#header h1 
{ 
    float: right; 
    display: inline; 
    color: black; 
    font-family: helvetica, arial; 
    font-weight: 100; 
} 
#image 
{ 
    width:1024; 
    height:100; 
    border:1px dotted yellow; 
}

来源

2011-09-19 Andy

你的HTML看起来不错，但你的CSS缺少你的宽度和高度，你的h1标签px测量正在向float: right;发出，这意味着标题div可能不会有高度（您需要'清除'标题div）

编辑：

仅供参考，一个简单的方法来清除的只是把一个div与大家需要明确的内容在一类的清晰，然后用CSS来告诉div来清除，例如：

HTML：

<div id="header"> 
    <h1>Andy</h1> 
    <div class="clear"></div> 
</div>

CSS：

.clear { 
    clear: both; 
}

有这样做的其他方式，例如：http://www.webtoolkit.info/css-clearfix.html

来源

2011-09-19 03:49:03

嗯好吧，我从#header h1标签中删除了float right属性来测试，并且它似乎清除了问题。我将如何去清除头div。说清楚：这两个头文件中的div？或在下面的下一个div？ – Andy

编辑我的回答以添加明确信息 –

'＃header'上的另一种方法是'overflow：hidden'。 –

什么让这些元素不被某些div内？

回答

相关问题