css布局问题,怎么让main和side正常点丫
<!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>框架</title>
<style type="text/css">
*{background-image:url(图片文件/背景图片.GIF); background-repeat:repeat;}
*{margin:0 auto; width:900px; padding:0; text-align:center;}
#head{width:900px; height:150px; background-image:url(图片文件/头部背景.jpg);}
#foot{width:900px; height:auto; clear:both}
.main{width:500px; height:auto; float:left;}
.side{width:50px; height:auto; float:right;}
#table{width:900px}
ul{list-style:none; font-size:16px; float:right}
</style>
</head>
<body><div id="head"></div><div id="table"><table border="0" width="100" height="17" align="center">
<tr><td height="15px" width="150px">主页</td>
<td>基本信息</td><td>学校地图</td><td>相关图片</td><td>作品相关</td></table>
</div>
<div id="center">
<div class="main"><h3 align="left">感谢所有支持我的人</h3>
<h4>感谢我的父母</h4>
</div>
<div class="side">
<ul >
<li><a href="感谢.html">感谢</a></li></ul>
</div>
</div>
<div id="foot">底部信息</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=gb2312" />
<title>框架</title>
<style type="text/css">
*{background-image:url(图片文件/背景图片.GIF); background-repeat:repeat;}
*{margin:0 auto; width:900px; padding:0; text-align:center;}
#head{width:900px; height:150px; background-image:url(图片文件/头部背景.jpg);}
#foot{width:900px; height:auto; clear:both}
.main{width:500px; height:auto; float:left;}
.side{width:50px; height:auto; float:right;}
#table{width:900px}
ul{list-style:none; font-size:16px; float:right}
</style>
</head>
<body><div id="head"></div><div id="table"><table border="0" width="100" height="17" align="center">
<tr><td height="15px" width="150px">主页</td>
<td>基本信息</td><td>学校地图</td><td>相关图片</td><td>作品相关</td></table>
</div>
<div id="center">
<div class="main"><h3 align="left">感谢所有支持我的人</h3>
<h4>感谢我的父母</h4>
</div>
<div style="clear:both;"></div>
<div class="side">
<ul >
<li><a href="感谢.html">感谢</a></li></ul>
</div>
</div>
<div id="foot">底部信息</div>
</body>
</html>
两个div不限制高度很容易重叠在一起,给一个清除两者即可。
上一个:CSS中float:left什么意思?
下一个:div+css制作网页,其实就是用代码做网页是吧?