溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“如何實現左右兩列自適應中間列內容即隨中間內容高度自適應的布局”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何實現左右兩列自適應中間列內容即隨中間內容高度自適應的布局”吧!
代碼如下:
<!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>
<!--<div >11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
<table >
<tr><td>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td></tr></table>
-->
<table width="100%" border="1" cellpadding="0" cellspacing="0" >
<tr>
<td id="left">
leftside
</td>
<td id="center" >
<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>
到此，相信大家對“如何實現左右兩列自適應中間列內容即隨中間內容高度自適應的布局”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
