CSS div不以正確的垂直順序堆疊

我有兩個div。我想要一個ID爲「hor_rule」的ID出現在另一個ID「header」下面。CSS div不以正確的垂直順序堆疊

我的印象是這種情況應該會自動發生。我一定在做一些愚蠢的錯誤。

--- HTML文件---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ARCS <~~ the title ~~></title> 
    <style type="text/css" media="all">@import "css/styles.css";</style> 
</head> 
<body> 
<div id="container"> 
    <div id="header"> 
    <span id="header_title"><~~ the title ~~></span> 
</div> 
<div id="hor_rule"></div> 
</div> 
</body> 
</html>

--- CSS文件---

@charset "utf-8"; 
/* CSS Document */ 

#header { 
float:left; 
width:64%; 
vertical-align:top; 
margin:12px; 
} 

#header_title { 
font-family: Arial; 
font-size:xx-large; 
font-weight: bold; 
} 

#hor_rule{ 
    height:1px; 
    background-color:#999; 
}

來源

2009-06-01 Ankur

你的「頭」的div浮動，有64％的寬度...這意味着在它下面的東西（沒有適用寬度，或寬度小於容器的36％）將滑動並填充該點。將「hor_rule」的寬度設置爲高於36％的寬度。

或者，你可以設置你的「容器」 div來更大的寬度或有你的「容器」 DIV clear: both;

來源

2009-06-01 06:46:25 Jason

謝謝，我這樣做。我也不得不刪除浮動：左 – Ankur 2009-06-01 06:56:36

CSS div不以正確的垂直順序堆疊

回答

相關問題