以下是引用片段：
3.采用脚本控制列的高度（二）
不需要事先知道哪列的高度，脚本自动判断。
代码较复杂，有点延时：
<!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" xml:lang="en" lang="en">
<head>
<title>脚本控制三行三列自适应高度DIV布局</title>
<script src="../js/eqCols.js" type="text/javascript"></script>
<style type="text/css">
<!--
body{
font-size: 75%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 100%;
margin: 5px;
padding: 0px;
}
#header,#mid,#footer{
width: 760px;
margin: 0px auto;
padding: 0px;
}
#header{
background: #F4F4F4;
height: 60px;
margin-bottom: 5px;
}
h3,h5{
padding-top: 25px;
color: #708090;
text-align: center;
margin: 0;
}
#fbox{
background: #F1F1F1;
width: 195px;
float: left;
}
#mbox{
background: #DFF7FF;
margin: 0px 5px 0px;
padding: 0px;
float: left;
width: 360px;
}
#sbox{
background: #FFEBCC;
width: 195px;
float: right;
}
p{
margin: 0px;
padding: 10px;
text-indent: 2em;
line-height: 130%;
}
#footer{
background: #CDDBED;
border-top: solid 5px #FFFFFF;
text-align: center;
height: 60px;
clear: both;
}
-->
</style>
</head>
<body onload="P7_equalCols('fbox','mbox','sbox')">
<div id="header"><h3>脚本控制三行三列自适应高度DIV布局</h3></div>
<div id="mid">
<div id="fbox"><p>
亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。
使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。
</p><p>
亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。
使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。
</p></div>
<div id="mbox"><p>
亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。
使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。
</p>
<p>
如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。
</p>
<p>
亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。
使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。
</p>
<p>
如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。
</p>
</div><div id="sbox"><p>
亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。
使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。
</p></div>
</div>
<div id="footer"><h5>仅供演示<a href="http://homepage.yesky.com">网页陶吧</a></h5></div>
</body>
</html> <script language="Javascript">
var now = new Date();
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");
</script>
<noscript>
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>
</noscript>
|
