Question

我有两个div。我希望id为“hor_rule”的人出现在另一个id为“header”的下方。

我的印象是这应该自动发生。我一定是犯了一些愚蠢的错误。

--- 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;
}

Answer 1

你的“标题”div是浮动的，宽度为64％......这意味着它下方的某些东西（没有应用宽度或宽度小于容器的36％）会向上滑动填补那个地方。将“hor_rule”的宽度设置为高于36％的值。

或者，您可以将“容器”div设置为更大的宽度，或者将“容器”div设为clear: both;

CSS divs不按正确的垂直顺序堆叠

1 个答案: