什麼讓這些元素不被某些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內？

回答

相關問題