CSS div定位不如預期

我在我的websit上創建了兩個div。第一個具有彩色水色的div的高度爲200px。接下來的div給了一些填充。但原始div的高度現在已經減小了。它不再是200px。請建議一種方法，在第一格之後不要減少/重疊第一格。CSS div定位不如預期

HTML

<!doctype html> 
<html> 
<head> 
<title>Title</title> 
<link rel="stylesheet" type="text/css" href="style.css" > 
<script src="JavaScript.js"></script> 
</head> 
<body> 
<div> 
<ul id="nav"> 
      <li id="click"><a href="#">Contact</a></li> 
      <li> <a href="#">Blog</a></li> 
      <li> <a href="#">Work</a></li> 
      <li> <a href="#">About</a></li> 
      <li> <a href="#">Home</a></li> 
</ul> 
</div> 
<div> 
<img src="image.jpg" style="width: 100%"> 
</div> 
<div id="tagline"> 
<p>Miss Baker's flight was another milestone in the history of space flight…</p> 
<div> 
<div style="padding: 200px; background-color: red"> 
<p>Haha, it worked!!!</p> 
</div> 
</body> 
</html>

CSS

body { 
margin: 0; 
} 
#nav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
#nav li { 
    width: 20%; 
    float: left; 
    text-align: center; 
    display: inline; 
} 
#nav li a { 
line-height: 40px; 
    display: block; 
    padding: 0.5em 5px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #F2F2F2; 
    -webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3); 
    box-shadow: 3px 3px 3px rgba(51,51,51,0.3); 
} 
#nav a:link, #nav a:visited { 
    background-color: #071726; 
} 
#nav a:hover, #nav a:active, #nav a:focus { 
    background-color: #326773; 
} 
#tagline { 
height: 200px; 
background-color: aqua; 
} 

img {display:block;} 
p {margin:0;}

這裏的小提琴

http://jsfiddle.net/uxrN5/

來源

2013-10-20 microman

請添加小提琴：http://jsfiddle.net – Thew

http://jsfiddle.net/uxrN5/ – microman

考慮將其添加到您的問題以及不是每個人都閱讀評論。 – Thew

最有可能的罪魁禍首是23行：

<div>

你大概的意思是：

</div>

這種變化既能使HTML有效，也使紅色的div元素的標語，不是孩子的兄弟姐妹，這可能是你想。發生

http://jsfiddle.net/uxrN5/3/

來源

2013-10-20 16:47:03

謝謝，哥們。我從來沒有見過相同的。 – microman

重疊，因爲你不小心錯過了關閉標語格：

<div id="tagline"> 
<p>Miss Baker's flight was another milestone in the history of space flight…</p> 
</div> 
<div style="padding: 200px; background-color: red"> 
<p>Haha, it worked!!!</p> 
</div>

來源

2013-10-20 17:14:26

CSS div定位不如預期

回答

相關問題