左右两列自适应中间列内容即随中间内容高度自适应的布局_ Div+Css教程-查字典教程网
左右两列自适应中间列内容即随中间内容高度自适应的布局
左右两列自适应中间列内容即随中间内容高度自适应的布局
发布时间:2016-12-27 来源:查字典编辑
摘要:testbody{margin:0;padding:0;}table,tr,td{margin:0;padding:0;vertical-a...

<!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">

<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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类