解決列高度自適應的五種方法!

1.背景圖填充

這是使用最廣泛的一種做法,無hacks,推薦使用:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(列高度相同的方法)</title>
<style type="text/css">
body{
 padding: 0;
 margin: 0;
 font-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
 line-height: 140%;
 background:#E7DFD3;
}
#middle{
 width: 580px;
 float:left;
 background:#FFFFFF;
 text-align:left;
}

#header,#footer{
 background: #E8E8E8;
 width: 750px;
 text-align:center;
}
#sideleft{
 width: 580px;
 float: left; 
 position:relative;
 margin-left:-580px;
}
#sideright{
 width: 170px;
 float: right;
 position:relative;
 margin: 0 -170px 0 0;
 background: #F0F0F0;
}

#footer{
 clear:both;
 
}
h1,h2,address,p{
 margin: 0;
 padding: .8em;
}
h1,h2{font-size: 20px;}

</style>
<script type="text/javascript">
// <![CDATA[

function toggleContent(name,n) {
 var i,t='',el = document.getElementById(name);
 if (!el.origCont) el.origCont = el.innerHTML;
 
 for (i=0;i<n;i++) t += el.origCont;
 el.innerHTML = t;
 }

// ]]>
</script>
</head>
<body>

  <div id="header">
    <h1>Head</h1>
  <div id="middle">
  <div id="sideright">
  <div id="sideleft">
    <h2>sideleft</h2>
 <p><a href="javascript:toggleContent('sideleft',1)">默認長度</a>  <a href="javascript:toggleContent('sideleft',2)">加長頁面</a></p>
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
    <p> 像素是計算機屏幕上的不可縮放的點,而一個
      h3 就是一個字大小的方塊。由於字體大小的變化, h3
      代表用戶喜歡的文字大小的相對單位。 </p>
    <p> 採用印刷式的固定設計方案或許要容易些,因爲如果尺寸不變,則考慮的東西就相對較少。可是如果採用彈性的設計方法,就可以充分利用電腦的顯示器和瀏覽器。 </p>
    <p> 也許你想你的網站以某種特定的方式顯示,但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性,從而對網站的成功造成損害。 </p>
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
  </div>
  
    <h2>sideright</h2> 
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
    <p> 像素是計算機屏幕上的不可縮放的點,而一個
      h3 就是一個字大小的方塊。由於字體大小的變化, h3
      代表用戶喜歡的文字大小的相對單位。 </p>
    <p> 採用印刷式的固定設計方案或許要容易些,因爲如果尺寸不變,則考慮的東西就相對較少。可是如果採用彈性的設計方法,就可以充分利用電腦的顯示器和瀏覽器。 </p>
    <p> 也許你想你的網站以某種特定的方式顯示,但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性,從而對網站的成功造成損害。 </p>
  </div></div>
  <div id="footer">
    <address>
      Footer
    </address>
    <p>製作:<a href="http://www.yzci.com/">Yzci.Com</a></p>
  </div>
</body>
</html>

2.採用腳本控制列的高度(一)
需要事先知道哪列的高度,以此爲基準用腳本控制。
document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"
上面的代碼是以sideright的基準高度來控制sideleft的高度。
代碼簡單,但比較被動:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(使用JS實現列高度相同的方法)</title>
<style type="text/css">
body{
 padding: 0;
 margin: 0;
 font-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
 line-height: 140%;
 text-align: center;
 background:#E7DFD3;
}
#wrap{
 width: 750px;
 margin: 0 auto;
 /*overflow: hidden;*/
}
#header{
 background: #E8E8E8;
}
#sideleft{
 width: 580px;
 float: left; 
 background: #FFF;
 text-align: left;
}
#sideright{
 width: 170px;
 float: left;
 background: #F0F0F0;
 text-align: left;
}

#footer{
 background: #E8E8E8;
 width: 100%;
 float: left;
}
h1,h2,address,p{
 margin: 0;
 padding: .8em;
}
h1,h2{font-size: 20px;}
</style>
</head>
<body>
<div id="wrap">
  <div id="header">
    <h1>Head</h1>
  </div>
  <div id="sideleft">
    <h2>sideleft</h2>
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
    <p> 像素是計算機屏幕上的不可縮放的點,而一個
      h3 就是一個字大小的方塊。由於字體大小的變化, h3
      代表用戶喜歡的文字大小的相對單位。 </p>
    <p> 採用印刷式的固定設計方案或許要容易些,因爲如果尺寸不變,則考慮的東西就相對較少。可是如果採用彈性的設計方法,就可以充分利用電腦的顯示器和瀏覽器。 </p>
    <p> 也許你想你的網站以某種特定的方式顯示,但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性,從而對網站的成功造成損害。 </p>
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
    <p> 像素是計算機屏幕上的不可縮放的點,而一個
      h3 就是一個字大小的方塊。由於字體大小的變化, h3
      代表用戶喜歡的文字大小的相對單位。 </p>
    <p> 採用印刷式的固定設計方案或許要容易些,因爲如果尺寸不變,則考慮的東西就相對較少。可是如果採用彈性的設計方法,就可以充分利用電腦的顯示器和瀏覽器。 </p>
    <p> 也許你想你的網站以某種特定的方式顯示,但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性,從而對網站的成功造成損害。 </p>
  </div>
  <div id="sideright">
    <h2>sideright</h2>
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
    <p> 像素是計算機屏幕上的不可縮放的點,而一個
      h3 就是一個字大小的方塊。由於字體大小的變化, h3
      代表用戶喜歡的文字大小的相對單位。 </p>
    <p> 採用印刷式的固定設計方案或許要容易些,因爲如果尺寸不變,則考慮的東西就相對較少。可是如果採用彈性的設計方法,就可以充分利用電腦的顯示器和瀏覽器。 </p>
    <p> 也許你想你的網站以某種特定的方式顯示,但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性,從而對網站的成功造成損害。 </p>
  </div>
  <script type="text/javascript">
document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"
</script>
  <div id="footer">
    <address>
      Footer
    </address>
    <p>製作:<a href="http://www.yzci.com/">Yzci.Com</a></p>
  </div>
</div>
</body>
</html>

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 οnlοad="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://www.yzci.com/">Yzci.Com</h5></div>
</body>
</html>

4.採用負的外邊界和內補丁相結合
不需要事先知道哪列的高度。
hacks比較多(主要是opera的),但容易使用,推薦:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(DIV+CSS佈局中自適應高度的解決方法)</title>
<style type="text/css">
body{
 padding: 0;
 margin: 0;
 font-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
 line-height: 140%;
 text-align: center;
 background:#E7DFD3;
}
#wrap{
 width: 750px;
 margin: 0 auto;
 overflow: hidden;
}
#header{
 background: #E8E8E8;
}
#sideleft{
 width: 580px;
 float: left; 
 background: #FFF;
 text-align: left;
}
#sideright{
 width: 170px;
 float: left;
 background: #F0F0F0;
 text-align: left;
}
/* easy clearing */
#wrap:after
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]'; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
#wrap
 {
 display: inline-block;
 }
/*\*/
#wrap
 {
 display: block;
 }
/* end easy clearing */
/*\*/
#sideleft, #sideright
 {
 padding-bottom: 32767px !important;
 margin-bottom: -32767px !important; 
 }
@media all and (min-width: 0px) {
#sideleft, #sideright
 {
 padding-bottom: 0 !important;
 margin-bottom: 0 !important; 
 }
#sideleft:before, #sideright:before
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]';
 display: block;
 background: inherit;
 padding-top: 32767px !important;
 margin-bottom: -32767px !important;
 height: 0;
 }
}
/**/
#footer{
 background: #E8E8E8;
 width: 100%;
 float: left;
}
h1,h2,address,p{
 margin: 0;
 padding: .8em;
}
h1,h2{font-size: 20px;}
</style>
</head>
<body>
<div id="wrap">
  <div id="header">
    <h1>Head</h1>
  </div>
  <div id="sideleft">
  <h2>sideleft</h2>
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
    <p> 像素是計算機屏幕上的不可縮放的點,而一個
      h3 就是一個字大小的方塊。由於字體大小的變化, h3
      代表用戶喜歡的文字大小的相對單位。 </p>
    <p> 採用印刷式的固定設計方案或許要容易些,因爲如果尺寸不變,則考慮的東西就相對較少。可是如果採用彈性的設計方法,就可以充分利用電腦的顯示器和瀏覽器。 </p>
    <p> 也許你想你的網站以某種特定的方式顯示,但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性,從而對網站的成功造成損害。 </p>
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
    <p> 像素是計算機屏幕上的不可縮放的點,而一個
      h3 就是一個字大小的方塊。由於字體大小的變化, h3
      代表用戶喜歡的文字大小的相對單位。 </p>
    <p> 採用印刷式的固定設計方案或許要容易些,因爲如果尺寸不變,則考慮的東西就相對較少。可是如果採用彈性的設計方法,就可以充分利用電腦的顯示器和瀏覽器。 </p>
    <p> 也許你想你的網站以某種特定的方式顯示,但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性,從而對網站的成功造成損害。 </p>
   
  </div>
  <div id="sideright">
  <h2>sideright</h2>
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
    <p> 像素是計算機屏幕上的不可縮放的點,而一個
      h3 就是一個字大小的方塊。由於字體大小的變化, h3
      代表用戶喜歡的文字大小的相對單位。 </p>
    <p> 採用印刷式的固定設計方案或許要容易些,因爲如果尺寸不變,則考慮的東西就相對較少。可是如果採用彈性的設計方法,就可以充分利用電腦的顯示器和瀏覽器。 </p>
    <p> 也許你想你的網站以某種特定的方式顯示,但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性,從而對網站的成功造成損害。 </p>
  </div>
  <div id="footer">
    <address>
    Footer
    </address>
 <p>製作:<a href="http://www.yzci.com/">Yzci.Com</a></p>
  </div>
</div>
</body>
</html>

5.採用負的左右邊界和相對定位
下面的例子能較好地解決列高度相同的問題。
三行二列布局,主要內容在左邊,網頁寬度750px,左列580px,右列170px。
CSS代碼:

#middle{ 
 width: 580px; 
 float:left; 
 background:#FFFFFF; 
 text-align:left; 
} 
#sideleft{ 
 width: 580px; 
 float: left;  
 position:relative; 
 margin-left:-580px; 
} 
#sideright{ 
 width: 170px; 
 float: right; 
 position:relative; 
 margin: 0 -170px 0 0; 
 background: #F0F0F0; 
} 

HTML代碼:

<div id="middle"> 
  <div id="sideright"> 
    <div id="sideleft"> 
    </div> 
  </div> 
</div>

從結構看,middle(使用的是左列希望的背景色)在最外面,寬度等於sideleft的寬度,往裏一層是sideright,其寬度爲170px,浮動方向是右邊。但其右面的邊界是負的170px,相當於將sideright拉向右面(右面緊貼着middle的右邊)170px的位置。而sideleft又是套在sideright裏面的,其內容先於sideright出來,左邊界是負的580,相當於在sideright左邊580px,此時sideleft和middle位置重合。
優點:不需要背景圖片,無hacks,完全的自適應高度。
缺點:現在的代碼只能左對齊。
演示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(DIV+CSS佈局中自適應高度的解決方法)</title>
<style type="text/css">
body{
 padding: 0;
 margin: 0;
 font-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
 line-height: 140%;
 text-align: center;
 background:#E7DFD3;
}
#wrap{
 width: 750px;
 margin: 0 auto;
 overflow: hidden;
}
#header{
 background: #E8E8E8;
}
#sideleft{
 width: 580px;
 float: left; 
 background: #FFF;
 text-align: left;
}
#sideright{
 width: 170px;
 float: left;
 background: #F0F0F0;
 text-align: left;
}
/* easy clearing */
#wrap:after
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]'; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
#wrap
 {
 display: inline-block;
 }
/*\*/
#wrap
 {
 display: block;
 }
/* end easy clearing */
/*\*/
#sideleft, #sideright
 {
 padding-bottom: 32767px !important;
 margin-bottom: -32767px !important; 
 }
@media all and (min-width: 0px) {
#sideleft, #sideright
 {
 padding-bottom: 0 !important;
 margin-bottom: 0 !important; 
 }
#sideleft:before, #sideright:before
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]';
 display: block;
 background: inherit;
 padding-top: 32767px !important;
 margin-bottom: -32767px !important;
 height: 0;
 }
}
/**/
#footer{
 background: #E8E8E8;
 width: 100%;
 float: left;
}
h1,h2,address,p{
 margin: 0;
 padding: .8em;
}
h1,h2{font-size: 20px;}
</style>
</head>
<body>
<div id="wrap">
  <div id="header">
    <h1>Head</h1>
  </div>
  <div id="sideleft">
  <h2>sideleft</h2>
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
    <p> 像素是計算機屏幕上的不可縮放的點,而一個
      h3 就是一個字大小的方塊。由於字體大小的變化, h3
      代表用戶喜歡的文字大小的相對單位。 </p>
    <p> 採用印刷式的固定設計方案或許要容易些,因爲如果尺寸不變,則考慮的東西就相對較少。可是如果採用彈性的設計方法,就可以充分利用電腦的顯示器和瀏覽器。 </p>
    <p> 也許你想你的網站以某種特定的方式顯示,但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性,從而對網站的成功造成損害。 </p>
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
    <p> 像素是計算機屏幕上的不可縮放的點,而一個
      h3 就是一個字大小的方塊。由於字體大小的變化, h3
      代表用戶喜歡的文字大小的相對單位。 </p>
    <p> 採用印刷式的固定設計方案或許要容易些,因爲如果尺寸不變,則考慮的東西就相對較少。可是如果採用彈性的設計方法,就可以充分利用電腦的顯示器和瀏覽器。 </p>
    <p> 也許你想你的網站以某種特定的方式顯示,但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性,從而對網站的成功造成損害。 </p>
   
  </div>
  <div id="sideright">
  <h2>sideright</h2>
    <p> 要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用,就可以成爲增強親和力和易用性的一個自然選擇,同時又無須做出設計上的犧牲。 </p>
    <p> 像素是計算機屏幕上的不可縮放的點,而一個
      h3 就是一個字大小的方塊。由於字體大小的變化, h3
      代表用戶喜歡的文字大小的相對單位。 </p>
    <p> 採用印刷式的固定設計方案或許要容易些,因爲如果尺寸不變,則考慮的東西就相對較少。可是如果採用彈性的設計方法,就可以充分利用電腦的顯示器和瀏覽器。 </p>
    <p> 也許你想你的網站以某種特定的方式顯示,但是你的用戶想看到的可能不一樣。任何強加於用戶的東西都不利於易用性,從而對網站的成功造成損害。 </p>
  </div>
  <div id="footer">
    <address>
    Footer
    </address>
 <p>製作:<a href="http://www.yzci.com/">Yzci.Com</a></p>
  </div>
</div>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章