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不以正确的垂直顺序堆叠

回答

相关问题