2

我试图在表格单元格内放置一些图标<td>，但结果是它们位于屏幕的右上角（表格单元格之外）。

我的代码的简短版本是这样的：

<td class="td_name">
  <div class="actions">
    <div class="floatLeft iconset_16px update_sprite_bw_16px" title="Update"></div>
    <div class="floatLeft iconset_16px settings_sprite_bw_16px" title="Settings"></div>
    <div class="floatLeft iconset_16px delete_sprite_bw_16px" title="delete"></div>
  </div>
  <div class="gal_name">
    Some name
  </div>
</td>

其中td_nameposition 设置为relative并action设置为absolute。这应该有效，但这次不行。

我在这里想念什么？在 jsFidle 上查看完整的代码示例。

笔记

我正在尝试将DIVaction定位在<td class="td_name">.
如果您的 jsFiddle 仍然iconset_16px在 jsFiddle 的 HTML 窗口的右上角显示 div，那么您的示例也不起作用。

#sim_gallery .defaultList tr td.name {  position: relative; width: 200px; height: 100px; }
#sim_gallery .defaultList tr td .actions { position: absolute; top: 0px; right: 0px; margin: 5px;}

注意 2
这适用于不熟悉表格用法的每个人。

在 90 年代初期，使用表格进行页面布局非常流行且非常简单。但设计师们很快就明白，改变布局是一种痛苦。使用表格还有几个缺点。

所以是的，你可以设计任何东西，而无需使用表格。

那么你什么时候使用桌子？表格通常用于显示表格数据。这是一种用于网络的 Excel 表格。我的经验是，构造表格数据比列表元素和 div 更容易。因此，在某些情况下，我使用表格时知道这不会对网站产生任何负面影响。

所以，请不要开始争论使用表格有多糟糕。用你的能量来帮助我解决我的问题:)

4

3 回答 3

3

经过更多测试后，似乎无法定位表格单元格。哪种有意义。但我并没有试图定位表格单元格本身，而是单元格内的内容。

在网络上进行了更多研究（以及一些无用的辩论）之后，我找到了这篇文章。这基本上给了我一个简短的答案：不，这是不可能的。

在他们的示例中，他们使用 jQuery。但是由于我仍然想使用 CSS 来做这件事，所以我想出了一个替代解决方案。

我只是将我的内容包装在表格单元格的 DIV 中，并确保该 DIV 与表格单元格一样大。瞧，一切都很好:)

.wrapper { width: 200px; height: 100px; line-height: 100px; position: relative; border: solid 1px #666; }
.actions { position: absolute; top: 0px; right: 0px; }
.iconset_16px { height: 16px; width: 16px; background-color: #87ceeb; margin: 3px;}
.floatLeft  { float:left!important; }

<table>
<tr>
<td>
 <div class="wrapper">
 <div class="actions">
   <div title="Update" class="floatLeft iconset_16px"></div>
   <div title="Settings" class="floatLeft iconset_16px"></div>
   <div title="delete" class="floatLeft iconset_16px"></div>
 </div>

 <div class="gal_name">
   <a title=" Adventure" href="#"> Adventure</a>
 </div>
 <div>   
</td>
</tr>
</table>
于 2012-04-15T17:39:49.327 回答
0

不完全知道您要做什么，但是您是否尝试过设置position: relative您<td>的图标，然后根据需要调整图标的位置？

http://jsfiddle.net/Z3kpr/1/

于 2012-04-15T16:35:36.190 回答
0

您div下面的元素actions与您的!important标志一起向左浮动（出于这个原因，这是个坏主意），因此它们忽略了其父级的定位。

取下浮子，它们将被正确定位。

这是您更新的小提琴，其中一个已修复，因此您可以看到不同之处。 http://jsfiddle.net/u9p4u/1/

于 2012-04-15T16:35:53.070 回答