Question

<tr>
    <td>
        Left Text
        <div style='text-align:right;float:right;'>
            <img src='./close.png' height='40px' />
        </div>
    </td>
</tr>
<tr>
    <td>
        This text gets bumped down due to imag
    </td>
</tr>

嘿伙计们......

我的问题是我有一个包含很多行的表格...在一行中我需要将图像对齐到右边，尽管图像高度会向下推动下一行并导致大量空白。

是否可以让下一行不受div和图像的影响？

格雷格

Answer 1

OOPS ......刚刚意识到我在发布抱歉后忘记了桌子，解决方案实际上只能正常用于div

我会看到3种可能的解决方案，具体取决于您希望如何显示内容。全部使用CSS。

1：使用高度处理div并指定如何处理溢出

.mydiv1{
     height:100px;
     overflow:hidden; //optionally you can specify visible so it overflows and remains completely visible depending on your content
}

2：指定将包含在div中的图像大小，而不影响页面的其余部分

img.myimg {
     height:90px;
     width:90px;
}

3：将图像作为背景图像放入div中

.mydiv1 {
     background-image:url('myimage.png');
     background-repeat:no-repeat;
}

或者您可以根据自己的想法使用组合。

注意：我使用了类而不是ID，假设您可以在多于1个div中使用代码，只需在元素的class属性中指定类名

Answer 2

为height标记中的图片指定width和img。这样您就可以限制图像的高度和宽度。

Answer 3

您可以通过两种方式来解决这个问题，而无需在新行处剪切图像。

将div设置为高度为1px。然后图像将展开，但由于父容器只有1px，因此不会影响行高。（如果图像有浮动）
在图片上定位绝对位置并在div上相对位置。

无论如何我不会推荐任何一个，因为图像不会推开第二行的文本（或新图像）。所以根据你的内容，如果可能，我可能会松开桌子。

div中的图像会影响表格中的行

3 个答案: