HTML中的Div标签相互重叠

Question

I'm trying to create my personal HTML site (I'm very new in web-site development). 我正在尝试创建我的个人HTML网站（我在网站开发中非常陌生）。 But I faced the problem that two nearest div tags are overlapping each other and don't understand why. 但是我面临的问题是，两个最近的div标签相互重叠，不知道为什么。 Here is code so you can see for yourself: 这是代码，因此您可以自己查看：

<!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>

And stylesheet: 和样式表：

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

Here is what I get as the result: http://www.freeimagehosting.net/h11uc 结果是我得到的是： http : //www.freeimagehosting.net/h11uc

The divs inside "header" div are overlapping each other. “标题” div中的div彼此重叠。 But I wanted to create rectangle with first and after it print some text. 但是我想先创建一个矩形，然后再打印一些文本。 What is wrong with my code? 我的代码有什么问题？ Btw I use Chrome browser, but IE9 shows the same result. 顺便说一句，我使用的是Chrome浏览器，但IE9显示的结果相同。

Sorry for my bad English. 对不起，我的英语不好。

Answer 1

For some reason, you cannot write an empty <div> tag like <div /> . 由于某些原因，您不能编写空的<div>标记（如<div /> 。 Use <div></div> instead. 使用<div></div>代替。 See this fiddle: 看到这个小提琴：

http://jsfiddle.net/MzUtA/ http://jsfiddle.net/MzUtA/

HTML中的Div标签相互重叠

问题描述

1 个解决方案

解决方案1
5 已采纳 2012-09-27 20:44:25

HTML中的Div标签相互重叠

问题描述

1 个解决方案

解决方案1 5 已采纳 2012-09-27 20:44:25

解决方案1
5 已采纳 2012-09-27 20:44:25