请教怎么调节这个布局的文字上下高度，多谢
日期：2014-05-17 浏览次数：21027 次
请问如何调节这个布局的文字上下高度，谢谢！
各位高手，早上好！
本人学习着制作了一个如下的页面布局，
请问如何调节红圈和绿圈中的文字之间的高度距离以及与上下边的高度距离，我老是设置不好，排版出来红圈和绿圈中的文字互相差离的很开，并且它们与上下边也拉得很开，谢谢高手们指点！
代码如下：
各位高手，早上好！
本人学习着制作了一个如下的页面布局，
请问如何调节红圈和绿圈中的文字之间的高度距离以及与上下边的高度距离，我老是设置不好，排版出来红圈和绿圈中的文字互相差离的很开，并且它们与上下边也拉得很开，谢谢高手们指点！
代码如下：
- HTML code
<style type="text/css">
<!--
.highlightit img{
border: 1px solid #ccc;
}
.highlightit:hover img{
border: 1px solid #1D9CC1;
}
.highlightit:hover{
border: 1px;color:#1D9CC1;
}
//-->
</style>
<table width="50%" border="0">
<tr>
<td><div style="position:relative">
<a href="http://www.kanCBA.Com" class="highlightit" target="_blank">
<img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森" />
</a>
<p style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;">
<div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div>
</p>
<p style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;">
<div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div>
</p>
</div>
<p><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></p>
<p style="color:#666; font-size: 13px;">感动感激感谢</p>
</td>
<td><div style="position:relative">
<a href="http://www.kanCBA.Com" class="highlightit" target="_blank">
<img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森" />
</a>
<p style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;">
<div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div>
</p>
<p style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opacity=20); -moz-opacity:0.7; opacity:0.7; background:#000; text-align: right; background-color: #00FF00;">
<div style="position:absolute; top:1px; left:88px; color: #FFF; width: 34px; text-align: right;">高清</div>
</p>
</div>
<p><a href="/movie/story/10659-4991.html" title="桃姐" target="_blank"><h4>桃姐</h4></a></p>
<p style="color:#666; font-size: 13px;">感动感激感谢</p>
</td>
<td><div style="position:relative">
<a href="http://www.kanCBA.Com" class="highlightit" target="_blank">
<img src="http://tu.xunbo.cc/20120303202654551.jpg" width="120" height="162" alt="KanCBA.Com-钱学森" title="钱学森" />
</a>
<p style="position:absolute; top:145px; left:0px; color: #FFF; width: 120px; filter:Alpha(opacity=20); -moz-opacity:0.5; opacity:0.5; background:#000; text-align: right;">
<div style="position:absolute; top:146px; left:0px; color: #FFF; width: 120px; text-align: right;">第三个测试代码</div>
</p>
<p style="position:absolute; top:1px; left:87px; color: #FFF; width: 34px; filter:Alpha(opa
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
