css里边,div包含一个table,如何做到table顶端对齐?

html-css030

css里边,div包含一个table,如何做到table顶端对齐?,第1张

现在已经不流行用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>