当前位置:编程学习 > html/css >>

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制作网页,其实就是用代码做网页是吧?

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,