固定HTML中的TD高度属性
时间:2020-03-06 14:37:17 来源:igfitidea点击:
我无法将td"日期"设置为固定高度。如果"正文"部分中的td Date元素少于实际值,即使我将"日期高度"设置为10%,将"正文高度"设置为90%也应大于。有什么建议?
<tr> <td class="Author" rowspan="2"> <a href="#">Claude</a><br /> <a href="#"><img src="Users/4/Avatar.jpeg" style="border-width:0px;" /></a> </td> <td class="Date"> Sent: <span>18.08.2008 20:49:28</span> </td> </tr> <tr> <td class="Body"> <span>Id lacinia lacus arcu non quis mollis sit. Ligula elit. Ultricies elit cursus. Quis ipsum nec rutrum id tellus aliquam. Tortor arcu fermentum nibh justo leo ante vitae fringilla. Pulvinar aliquam. Fringilla mollis facilisis.</span> </td> </tr>
现在,我的css是:
table.ForumThreadViewer td.Date { text-align: left; vertical-align: top; font-size: xx-small; border-bottom: solid 1 black; height: 20px; } table.ForumThreadViewer td.Body { text-align: left; vertical-align: top; border-top: solid 1 black; } table.ForumThreadViewer td.Author { vertical-align: top; text-align: left; }
它适用于FF,但不适用于IE。 :(
解决方案
的CSS
.Date { height: 50px; }
我不完全理解问题,我们是说如果使用此功能:
.Date { height: 10% } .Body { height: 90%; }
.Date td
大于应有的值?在不设置绝对高度的情况下,如何知道应该有多大?我们是否在考虑边框和填充?
我们可以尝试将colspan =" 2"
添加到.Body td
或者仅具有不间断空格(``)的额外<td>
元素中
使用百分比时,它们是相对于其容器的,即使那样,它也仅适用于某些类型的元素。我想让它起作用,我们需要将高度应用于<tr>,并赋予<table>一个高度。如果<table>的高度也是相对的,则还需要为其容器指定一个高度。
但是查看数据,我们确定要使用表吗?
奥莉是对的!然后给我们我们发布的屏幕截图,我们使用的是错误的标记。我们可以使用更多类似这样的内容:
<div class="post"> <div class="author"> <a href="#">Claude</a><br /> <a href="#"><img src="Users/4/Avatar.jpeg" /></a> </div> <div class="content"> <div class="date">Sent: 18.08.2008 20:49:28</div> <div class="body"> This is the content of the message. </div> </div> <div class="clear"> </div> </div>
用这样的CSS:
div.post { border: 1px solid #999; margin-bottom: -1px; /* collapse the borders between posts */ } div.author { float: left; width: 150px; border-right: 1px solid #999; } div.content { border-left: 1px solid #999; margin-left: 150px; } div.date { border-bottom: 1px solid #999; } div.clear { clear: both; height: 0; line-height: 0; }