div +css 小问题

请问 this is header 和 this is menu 下面的空行怎么去除呢？代码： <!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>div测试</title> <style> body{ margin:0px;} #container{width:900px;margin:0px auto;} #header{height:100px; background-color:#FF0000;margin:0px;} #menu{height:20px; background-color: #999999;margin:0px;} #sidebar{width:250px;float:left; background-color:#FFFF00;margin:0px;} #content{width:630px; float:right; background-color: #9966CC;margin:0px;} #foot{height:100px; background-color:#FF00FF} #t{width:100px; background-color:#0033FF} #g{width:80px; background-color:#996600} .clearfloat{clear:both; height:0px; line-height:0px;} </style> </head> <body> <div id="container"> <div id="header"> this is header</div> <br class="clearfolat"/> <div id="menu">this is menu</div> <br class="clearfolat"/> <div id="sidebar">this is sidebar</div> <div id="content"><p>this is content</p> <p>this is content</p><p>this is content</p> <div style="background-color:#FF66CC"> <div id="t">ttttt</div> <div id="g">gggggg</div> </div> <p>this is content</p><p>this is content</p> <p>this is content</p><p>this is content</p> </div> <br class="clearfloat"/> <div id="foot">this is foot</div> </div> </body> </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>div测试</title>

<style>
body{ margin:0px;}
#container{width:900px;margin:0px auto;}
#header{height:100px; background-color:#FF0000;margin:0px;}
#menu{height:20px; background-color: #999999;margin:0px;}
#sidebar{width:250px;float:left; background-color:#FFFF00;margin:0px;}
#content{width:630px; float:right; background-color: #9966CC;margin:0px;}
#foot{height:100px; background-color:#FF00FF}
#t{width:100px; background-color:#0033FF}
#g{width:80px; background-color:#996600}
.clearfloat{clear:both; height:0px; line-height:0px;}
div.clearfolat{clear:both; height:0; line-height:0;}
</style>
</head>

<body>
<div id="container">
  <div id="header"> this is header</div>
        <div class="clearfolat"></div>
        <div id="menu">this is menu</div>
        <div  class="clearfolat"></div>
        <div id="sidebar">this is sidebar</div>
     
        <div id="content"><p>this is content</p>
        <p>this is content</p><p>this is content</p>
        <div style="background-color:#FF66CC">
          <div id="t">ttttt</div>
                <div id="g">gggggg</div>
        </div>
        
        <p>this is content</p><p>this is content</p>
        <p>this is content</p><p>this is content</p>
        
        </div>
        <br  class="clearfloat"/>
        <div id="foot">this is foot</div>
</div>
</body>
</html>

其他：把那两个DIV下面的<br  class="clearfolat"/>删掉就行了. <br  class="clearfolat"/>删掉就行 你好，下面的<br>标签就是换行的意思，去掉就可以了^_^ <!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>div测试</title>

<style>
body{ margin:0px;}
#container{width:900px;margin:0px auto;}
#header{height:100px; background-color:#FF0000;margin:0; width:100%; float:left;}
#menu{height:20px; background-color: #999999;margin:0px; width:100%; float:left;}
#sidebar{width:250px;float:left; background-color:#FFFF00;margin:0px;}
#content{width:630px; float:right; background-color: #9966CC;margin:0px;}
#foot{height:100px; background-color:#FF00FF}

#t{width:100px; background-color:#0033FF}
#g{width:80px; background-color:#996600}
.clearfloat{clear:both; height:0px; line-height:0px;}
</style>
</head>

<body>
<div id="container">
  <div id="header"> this is header</div>
        <br  class="clearfolat"/>
        <div id="menu">this is menu</div>
        <br  class="clearfolat"/>
        <div id="sidebar">this is sidebar</div>
     
        <div id="content"><p>this is content</p>
        <p>this is content</p><p>this is content</p>
        <div style="background-color:#FF66CC">
          <div id="t">ttttt</div>
                <div id="g">gggggg</div>
        </div>
        
        <p>this is content</p><p>this is content</p>
        <p>this is content</p><p>this is content</p>
        
        </div>
        <br  class="clearfloat"/>
        <div id="foot">this is foot</div>
</div>
</body>
</html>
以上是你想要的效果,直接在样试里面加个 float:left; 就OK了。

上一个：jquery ui tabs我放到我DIV中显得太大了，怎么把修改CSS让它变小一点呢？
下一个：求高手帮我解释一下js和css代码。其中js中的secTable。css中的.tag_box

更多图片编程知识: