- 论坛徽章:
- 0
|
学CSS和XHTML来了,写一个测试页,用的是顶部+中间三浮动列+底部的布局.因为中间用position:absolute后,下面的footer就要上来重叠显示,所以只好搞成中间全float,据说这样会在IE6中引起长文字被剪短的bug,但也顾不得了.
问题是我现在在中间三列中选一列输文字看,这一输不得了,在IE6中,中间一列就因为内容多,把右边列挤下方了.在FF1.5中,则三列位置没变,但文字长的串到第三列去了.文字没有自动换行,而是变得和用了<pre>标记似的,回车当换行了.
怎么办好?
<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>
css测试网页</title>
<style type="text/css">
<!--
body { background : white ; color : black ;}
#siteTop {background: #FE0; height:50px;WIDTH:776px;
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto; }
#main {width:776px;MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;}
#sideBar {float:left; background: #0E0; width:200px;}
#middle {float:left;background: #e00; width: 250px;height:300px}
#mainContent {float:left; background: #00e; width: 300px;}
p {padding:10px;}
.text {font-size:13px}
#footer {clear:both;position:relative;margin-left:0px;background: #CCC;width:700px;display:normal;}
-->
</style>
</head>
<body>
<!-- 最上面的banner -->
<div id="siteTop">
</div>
<div id="main">
<!-- 左边的sidebar-->
<div id="sideBar">
sidebar
</div>
<!-- 中间-->
<div id="middle">
<span class="text">middlemiddlemiddlemiddlemiddlemiddlemiddlemid
dlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemi
ddlemiddlemiddlemiddlemiddlemiddlemiddlemiddle</span>
</div>
<!-- 右边的内容-->
<div id="mainContent">
main
</div>
</div>
<!--页脚-->
<div id="footer">
footer
</div>
</body>
</html>
[ 本帖最后由 HonestQiao 于 2005-11-18 00:57 编辑 ] |
|
免费注册
发表于 2005-11-17 23:33
