gpt4 book ai didi

CSS div 未按正确的垂直顺序堆叠

转载 作者:太空宇宙 更新时间:2023-11-03 22:10:12 27 4
gpt4 key购买 nike

我有两个 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;
}

最佳答案

你的“标题”div 是 float 的,宽度为 64%...这意味着它下面的东西(没有应用宽度,或者宽度小于容器的 36%)将向上滑动并填补那个位置。将“hor_rule”的宽度设置为高于 36%。

或者,您可以将“容器”div 设置为更大的宽度,或者让您的“容器”div 清除:两者;

关于CSS div 未按正确的垂直顺序堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/933760/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com