现在已经不流行用table布局了,不过实现起来也不难。内容基本都在<td>标签中,所以:
<td valign="top"></td>不过,基于你的要求,要做的是控制“个人中心”那一格的高度(W3C标准建议使用css样式来控制高度,所以):
<td style="height:10pxpadding:0pxmargin:0px">个人中心:....</td> <!--10px只是个示例,具体多少请自行调整,padding和margin属性只是防止意外而清除空白,可根据效果自行删掉-->不把上下用2个div分开,设置好图片的样式后,文字让其自动即可
<style type="text/css">.divbox{ width:500px height:500px border:1px solid red}
.divbox img{ float:left margin-right:10px}
</style>
</head>
<body>
<div class="divbox"><img src="images/bg_grid.png" width="60" height="60" />文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</body>
我知道了,你要做类似后台系统吧,宽度都能自适应屏幕,自适应分辨率的吧!
~OK,好吧!
上面回答的都没用,不带那样玩的~我经常做这个!有点小复杂,全用DIV中间内容部分IE7不行,所以得用TABLE内嵌!
<html xmlns="http://www.w3.org/1999/xhtml&quot>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>自适应</title>
<style type="text/css">
html {height:100%max-height:100%padding:0margin:0border:0background:#eef0effont-size:76%overflow:hidden}
body{height:100%max-height:100% border:0overflow:hidden background:#fff padding:0}
/*lay
--------------*/
#content{
position:absolute
overflow:hidden
z-index:3
top:106px
left:0
width:100%
bottom:28px
bottom:28px\9
background:#ddd
}
*html #content {
top:0
height:100%
max-height:100%
width:100%
overflow:hidden
position:absolute
z-index:3
border-top:106px solid #fff
border-bottom:28px solid #fff
}
#header{
position:absolute
margin:0
top:0
left:0
display:block
width:100%
height:106px
line-height:106px
background:#333
z-index:5
overflow:hidden
color:#fff
text-align:center
}
#footer{
position:absolute
margin:0
bottom:0
left:0
display:block
width:100%
height:28px
line-height:28px
text-align:center
z-index:5
overflow:hidden
color:#fff
background:#333
}
/*中间表格*/
.main_tab{
width:100%
height:100%
}
.main_tab td{
padding:0px
margin:0px
vertical-align:top
height:100%
max-height:100%
}
.main_tab td.td_left{
width:181px
background:#00CCFF
}
.main_tab td.td_close{
padding:0px
width:8px
vertical-align:middle
background:#ff0000
font-size:12px
overflow:hidden
}
</style>
</head>
<body>
<div id="header"><h1>顶部</h1></div>
<div id="content">
<table cellpadding="0" cellpadding="0" border="0" class="main_tab">
<tr>
<td class="td_left">
<div class="menu_column">
<div class="title"></div>
<div class="menu_con">
<div class="lef_nav">
左边
</div>
</div>
</div> <!--左边菜单 end-->
</td>
<td class="td_close">▶</td>
<td>
内容<br />兼容IE6、7、8,火狐,谷歌!
</td>
</tr>
</table>
</div>
<div id="footer">底部</div>
</body>
</html>