gpt4 book ai didi

html - HTML 中的 div 标签相互重叠

转载 作者:太空宇宙 更新时间:2023-11-03 20:54:06 26 4
gpt4 key购买 nike

我正在尝试创建我的个人 HTML 网站(我是网站开发的新手)。但我遇到了两个最近的 div 标签相互重叠的问题,不明白为什么。这是代码,您可以自己查看:

<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body style="background-color: #759CE0;">
<div id="wrapper">
<div id="header">
<div style="background-color: #708EE0; width: 100%; height: 30px; display: block;" />
<div>
<h1 id="segoeuilight">Welcome to my blog</h1>
<h3 id="smalltip">News and thoughts</h3>
</div>
</div>
<div id="container">
<div id="left" />
<div id="right" />
<div id="center" />
</div>
<div id="footer" />
</div>
</body>
</html>

和样式表:

@font-face
{
font-family: 'Segoe UI Light';
src: url('fonts/segoeuil.ttf');
}
@font-face
{
font-family: 'Segoe UI';
src: url('fonts/segoeui.ttf');
}
h1#segoeuilight
{
font-family: 'Segoe UI Light';
font-weight: normal;
color: #FFFFFF;
padding-left: 10px;
height: 20px;
}
h3#smalltip
{
font-family: 'Segoe UI';
font-weight: normal;
color: #FFFFFF;
padding-left: 10px;
}
div#header
{
height: 20%;
}
div#container
{
min-width:800px;
}
div#center
{
margin:0px 200px 0px 200px;
}
div#left
{
float:left;
width:200px;
}
div#right
{
float:right;
width:200px;
}
div#footer
{
height:100px;
}
div#wrapper
{
width: 800px; /* set to desired width in px or percent */
text-align: left; /* optionally you could use "justified" */
border: 0px; /* Changing this value will add lines around the centered area */
padding: 0;
margin: 0 auto;
background-color: #8D0087;
}

这是我得到的结果: http://www.freeimagehosting.net/h11uc

“header”div 中的 div 相互重叠。但我想先创建矩形,然后再打印一些文本。我的代码有什么问题?顺便说一句,我使用 Chrome 浏览器,但 IE9 显示相同的结果。

抱歉我的英语不好。

最佳答案

出于某种原因,你不能写一个空的 <div>标签如 <div /> .使用 <div></div>反而。看到这个 fiddle :

http://jsfiddle.net/MzUtA/

关于html - HTML 中的 div 标签相互重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12629687/

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