我自己做了一个很简单的布局，其中有几处问题。有可运行代码，请指教！！
我是初学布局的新手，今天做了一个布局，可是为什么中间的span部分都变成隐藏的了？
这三个span应该是中间平行的三列。可是现在都显示不出来
<span class= "c3 " id= "searchspan "> </span>
<span class= "c4 " id= "centerspan "> </span>
<span class= "c5 " id= "loginspan "> </span>
求解！
代码如下：
<!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=gb2312 " />
<title> xxxx </title>
<style type= "text/css ">
* {
margin: 0; padding:0
}
body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}
.blank2{ height:2px; clear:both; font-size:1px;overflow:hidden;}
.blank3{ height:3px; clear:both; font-size:1px;overflow:hidden;}
.blank5{height:6px; font-size:1px; clear:both;overflow:hidden;}
.blank9{ height:9px; font-size:1px; clear:both;overflow:hidden;}
.logobar {
margin:0 auto;
width: 760px;
height: 80px;
}
.navigate {
margin:0 auto;
width:760px;
height:40px;
}
.adbar {
margin:0 auto;
width:760px;
height:70px;
}
.mainbody {
margin:0 auto;
width:760px;
height:600px;
}
#searchspan {
width:160px;
height:200px;
}
#centerspan {
margin:1px 1px
width:500px;
height:200px;
}
#loginspan {
width: 190px;
height: 200px;
}
#usershow {
width: 100%;
height: 300px;
}
#userlist {
width: 380%;
height: 100px;
}
#articlelist {
margin: 2px;
width: 380px;
height: 100px;
}
.footer {
margin:0 auto;
width: 760px;
height: 100px;
}
.c0 {
background:red;
}
.c1 {
background:orange;
}
.c2 {
background:#F0B6A8;
}
.c3 {
background:#F4F6E8;
}
.c4 {
background:#B8A8F1;
}
.c5 {
background:#D6E296;
}
.c6 {
background:#C3D4CE;
}
</style>
</head>
<body>
<div class= "logobar c1 ">
</div>
<div class= "blank3 c0 ">
</div>
<div class= "navigate c2 ">
</div>
<div class= "blank3 c0 ">
</div>
<div class= "adbar c1 ">
</div>
<div class= "blank3 c0 " >
</div>
<div class= "mainbody c2 ">
<span class= "c3 " id= "searchspan "> </span>
<span class= "c4 " id= "centerspan "> </span>
<span class= "c5 " id= "loginspan "> </span>
<div class= "c6 " id= "usershow "> </div>
<span class= "c3 " id= "userlist "> </span>
<span class= "c4 " id= "articlelist "> </span>
</div>
<div class= "blank3 c0 ">
</div>
<div class= "adbar c1 ">
</div>
<div class= "blank3 c0 ">
</div>
<div class= "footer c2 ">
</div>
</body>
</html>
布局图片如下：
http://my.freep.cn/Dmy/070703/08/0707030826273705_96005.GIF
[解决办法]
建议:
<div class= "mainbody c2 ">
<div class= "c2_top ">
<span class= "c3 " id= "searchspan "> </span>
<span class= "c4 " id= "centerspan "> </span>
<span class= "c5 " id= "loginspan "> </span>
</div>
<div class= "c2_body ">
<div class= "c6 " id= "usershow "> </div>
</div>
<div class= "c2_bottom ">
<span class= "c3 " id= "userlist "> </span>
<span class= "c4 " id= "articlelist "> </span>
</div>
</div>
[解决办法]
你没有定义span的宽度，所以会这样；如果你向span中加入内容，span就会根据内容自动调整宽度。
以上两种方法都不会造成span的隐藏。
[解决办法]
楼主需要了解一下div和span的区别和联系！！
一个是预定义的一个是自适应的
[解决办法]
同小磊
[解决办法]
ＤＩＶ是硬的容器 ＳＰＡＮ是软的容器而且有点像表格，没有任何东西包括空格的时候就不会有线条
[解决办法]
同意楼上。
[解决办法]
因为div是block类型的标签,span是inline类型,至于block和inline有何区别,可以查下css文档,html中,以下标签都是block元素:
ADDRESS block
BLOCKQUOTE block
BODY block
CENTER block
COL block
COLGROUP block
DD block
DIR block
DIV block
DL block
DT block
FIELDSET block
FORM block
FRAME none
hn block
HR block
IFRAME block
LEGEND block
LI list-item
LISTING block
MARQUEE block
MENU block
OL block
P block
PLAINTEXT block
PRE block
TABLE block
TBODY none
TD block
TFOOT none
TH block
THEAD none
TR block
UL block
XMP block
