DIV在TD内顶对齐如何做
日期：2014-05-17 浏览次数：20749 次
DIV在TD内顶对齐怎么做？
下面代码直接能测试：
<html>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8" />
</HEAD>
<table width="200px" height="500px" border="1">
<tr>
<td>
<div style="width:200px; height:200px; border:red 1px solid">这里高度随字数改变而改变</div>
</td>
<td>
<div style="width:200px; height:100px; border:blue 1px solid">我要整个蓝色DIV不管怎要样都在这个TD顶部对齐</div>
</td>
</tr>
</table>
</html>
------解决方案--------------------
深夜党来了，在这个DIV的父级td 加 vertical-align:top; 已测试
<html>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8" />
</HEAD>
<table width="200px" height="500px" border="1">
<tr>
<td>
<div style="width:200px; height:200px; border:red 1px solid">这里高度随字数改变而改变</div>
</td>
<td style="vertical-align:top;">
<div style="width:200px; height:100px; border:blue 1px solid;">我要整个蓝色DIV不管怎要样都在这个TD顶部对齐</div>
</td>
</tr>
</table>
</html>
下面代码直接能测试：
<html>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8" />
</HEAD>
<table width="200px" height="500px" border="1">
<tr>
<td>
<div style="width:200px; height:200px; border:red 1px solid">这里高度随字数改变而改变</div>
</td>
<td>
<div style="width:200px; height:100px; border:blue 1px solid">我要整个蓝色DIV不管怎要样都在这个TD顶部对齐</div>
</td>
</tr>
</table>
</html>
------解决方案--------------------
深夜党来了，在这个DIV的父级td 加 vertical-align:top; 已测试
<html>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8" />
</HEAD>
<table width="200px" height="500px" border="1">
<tr>
<td>
<div style="width:200px; height:200px; border:red 1px solid">这里高度随字数改变而改变</div>
</td>
<td style="vertical-align:top;">
<div style="width:200px; height:100px; border:blue 1px solid;">我要整个蓝色DIV不管怎要样都在这个TD顶部对齐</div>
</td>
</tr>
</table>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
