2012-09-27 96 views
0

我试图创建我的个人HTML网站(我在网站开发中很新)。但是我遇到了两个最近的div标签互相重叠并且不明白为什么的问题。 这里是代码,所以你可以看到自己: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

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

对不起,我的英语不好。

+1

你能刚发布相关的代码,或做一个小提琴?没有人想要通过筛选。 – thatidiotguy

回答

5

出于某种原因,您不能编写一个空的<div>标签,如<div />。改为使用<div></div>。 看到这个小提琴:

http://jsfiddle.net/MzUtA/

+0

谢谢。像魅力一样=) – GuardianX