Question

我正在使用表来显示一些数据，而对于一行，我正在显示一个（可能）更长的字符串的35个字符的预览。当用户在其中一个预览上执行鼠标悬停时，它会显示旁边的全文。

问题是当显示全文时，tr高度已更改为适合全文，但我希望它保持相同的大小。

<td><a href="link.asp?tid=<%=ID%>" onmouseover="showDetails(<%=ID%>);"><%=shortPreview%></a>
<br/><div class="details" style="display:none;" id="<%=ID%>"><%=rsTickets("details")%></div></td>

CSS

.details {
  position:relative;
  top:-15px;
  left:260px;
  background-color:#FFFFAA;
  z-index:1;
  padding-top:5px;
  padding-bottom:5px;
  padding-right:15px;
  padding-left:5px;
  border:1px;
  border-style:solid;
  border-color:#CCCC99;

  -moz-border-radius: 1em 2em 2em 1em;
  border-radius: 1em 2em 2em 1em;
}

Answer 1

在单元格中放置一个固定大小的div并将其设置为position: relative。在div内部放置您的详细信息并将其设置为position: absolute;。这应该适用于99％。

Answer 2

当你将一个物体设置为相对物体时，它就是相对于它周围的物体。这意味着如果你改变div的高度（或者在这种情况下，显示它），周围的对象将适应这种变化。因此，当你将div设置为可见时，封装它的td也会改变它的高度。

将div设置为绝对位置可以解决问题，但是可能很难将其定位。除非你把它放在另一个div中。如果你在一个相对div中放置一个绝对div，那么绝对div对于relavite div是绝对的，从而解决了这个问题。这是一个例子：

<table>
    <tr><td><div style=position:relative>
          This div will not affect the td more than will this text.
          <div style=position:absolute;top10px;>
               This div will not affect the td, since it's absolute, and will be
               10px from the top of the outer div
          </div>
    </div></td></tr>
</table>

这应该可以解决问题。至少对我有用。

CSS显示但保持行高

2 个答案: