左右兩列自適應(yīng)中間列內(nèi)容即隨中間內(nèi)容高度自適應(yīng)的布局

發(fā)布時(shí)間：2014-08-08 08:52:04 作者：佚名

兩邊內(nèi)容可能隨中間內(nèi)容高度自適應(yīng)，中間內(nèi)容也可以隨兩邊內(nèi)容高度的增加而自適應(yīng)，經(jīng)過(guò)測(cè)試在主流瀏覽器中顯示一致，下面將經(jīng)驗(yàn)與大家分享

復(fù)制代碼

代碼如下:

<!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=utf-8" />
<title>test</title>
<style type="text/css">
body{margin:0; padding:0;}
table,tr,td{margin:0; padding:0; vertical-align:top; border-collapse:collapse; border:1px solid #FFFFFF}
#left,#center,#right{padding:10px; font:15px/180% bold "宋體"; color:#FFFFFF}
#left{ width:200px;background-color:#663399}
#center{ background-color:#006600;}
#right{ width:200px; background:#0066CC}
</style>
</head>


<table width="100%" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<tr>
<td id="left">
leftside
</td>
<td id="center" style="word-wrap:break-word;">
<div>
<pre>
cente
table+css的布局
1.兩邊內(nèi)容可能隨中間內(nèi)容高度自適應(yīng)。
2.中間內(nèi)容也可以隨兩邊內(nèi)容高度的增加而自適應(yīng)。
3.兩邊內(nèi)容固定寬度，中間沒(méi)有設(shè)置寬，但整個(gè)table設(shè)置了100%的可變寬度，
所以中間內(nèi)容會(huì)自動(dòng)適應(yīng)變化的。
4.另外有一點(diǎn)就是要對(duì)TD的設(shè)置vertical-align:top;這樣看上去才感覺(jué)才是從上到
下排列的
5.這種用table布局的方法比純div+css布局從原理上更容易讓人接受，如果說(shuō)用table
布局的惟一不好之處的話是跟seo 相處得不怎么融洽，因?yàn)樗阉饕鎸?duì)div的抓取能力
比table要好得多。
6.經(jīng)過(guò)測(cè)試在IE6.0,FF 3,Opera,Netscape Navigator,谷歌瀏覽器顯示都是一致的。
</pre>
</div>
</td>
<td id="right">
rightside6.經(jīng)過(guò)測(cè)試在IE6.0,FF 3,Opera,Netscape Navigator,谷歌瀏覽器顯示都是一致
</td>
</tr>
</table>
</body>
</html>