左右兩列自適應中間列內容即隨中間內容高度自適應的布局

2024-07-11 08:30:43

字體：大中小

來源：轉載

供稿：網友

復制代碼

代碼如下:
<!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.兩邊內容可能隨中間內容高度自適應。
2.中間內容也可以隨兩邊內容高度的增加而自適應。
3.兩邊內容固定寬度，中間沒有設置寬，但整個table設置了100%的可變寬度，
所以中間內容會自動適應變化的。
4.另外有一點就是要對TD的設置vertical-align:top;這樣看上去才感覺才是從上到
下排列的
5.這種用table布局的方法比純div+css布局從原理上更容易讓人接受，如果說用table
布局的惟一不好之處的話是跟seo 相處得不怎么融洽，因為搜索引擎對div的抓取能力
比table要好得多。
6.經過測試在IE6.0,FF 3,Opera,Netscape Navigator,谷歌瀏覽器顯示都是一致的。
</pre>
</div>
</td>
<td id="right">
rightside6.經過測試在IE6.0,FF 3,Opera,Netscape Navigator,谷歌瀏覽器顯示都是一致
</td>
</tr>
</table>
</body>
</html>

上一篇：CSS list-style修改列表屬性控制li標簽樣式

下一篇：css外部文件的引用方式有哪幾種

發表評論

共有條評論