0

我很难弄清楚发生了什么以及如何解决它。

我有一些 div 包含一些在显示表格数据时导致宽度问题的图标。如果我删除包含图标的 div，行宽将按照我想要的方式结束（请参阅下面的 firefox 示例）。

这是我想要的 Firefox 中的视图（注意用红色圈出的图标的位置，它在相同的 y 坐标或附近对齐）： alt text http://www.redsandstech.com/ff_display.jpg

这是 IE7 中的视图（注意图标和灰线的宽度，即表格行）： alt text http://www.redsandstech.com/ie_display.jpg

这是HTML：

<table>
 <tbody>
  <tr>
    <td>
        <span>stuff 1</span>
        <span>stuff 2</span>
        <div class="prop_edit"><img class="img_height14" src="edit.jpg"></div>
        <div class="prop_archive"><img class="img_height14" src="archive.jpg"></div>
        <div class="prop_delete"><img class="img_height14" src="delete.jpg"></div>
        <div style="display:none;"> 
             <div>Links Here</div>
        </div>
     </td>
  </tr>
</tbody>

继承人的CSS：

.prop_edit{
float:right;
position: relative;
top: 0px;
right:50px; 

}
.prop_archive{
    float:right;
    position: relative;
    top: 0px;
    right:10px;
}
.prop_delete{
    float:right;
    position: relative;
    top: 0px;
    right: -30px;
}
.img_height14{
    height:14px;
    vertical-align:top;
    position:relative;
}

我已经尝试了一堆不同的 CSS 东西，但实际上我只是想弄清楚一些事情。有人有一些可以帮助我的提示吗？

提前致谢。

4

1 回答 1

0

为什么需要分工？只需将图像本身浮动到右侧。就像我告诉过百万其他人一样，您不能在表格中使用除法而不产生一些您无法修复的不利影响，它们不应该存在。

我的猜测是这right: -30px被解释为在右侧添加 30px 以为它腾出空间。只是将图像浮动到右侧将是一个更好的解决方案，您可以在它们周围添加一个边距以正确间隔它们。

此外，您应该首先将任何内容浮动到右侧，而不是在内容之后。如果内容在内容之后，大多数浏览器通常会将向右浮动的内容放在新行上，这是正确的行为。这是因为默认情况下，一个分割会自己开始一个新行，然后它会被修改为向右浮动，通常在它已经创建的同一新行上。

所以，是的，有一些不同的事情会导致问题。但是，并不是一件事会导致所有问题。

于 2010-04-05T23:10:39.963 回答