0

为什么我的图像与我的文字重叠?下面是 5 个不同图像和 1 个表格的 CSS。

#memberreporthistoryimage1 {
    position:absolute;
    left:20%;

}

   #memberreporthistoryimage2 {
       position:absolute;
       left:40%;

}

      #memberreporthistoryimage3 {
          position:absolute;
          left:60%;

}

         #memberreporthistoryimage4 {
             position:absolute;
             left:30%;
           margin-top:20%;
}

            #memberreporthistoryimage5 {
                position:absolute;
                left:50%;
                margin-top:20%;
}

    #memberreporthistorytable2 {
    position:absolute;
    width:100%;

}

如您所见,我将自己的立场用作绝对。因此,如果我没记错的话,我的第二张桌子的位置应该根据我的图像宽度和高度,因为 memberreporthistorytable2 在我的图像下方。不幸的是,事实并非如此。从下图中可以看出,只要我单击一些数据,它就会重叠。

这是没有点击数据时的布局

在此处输入图像描述

这是重叠的图像。

在此处输入图像描述

我尝试添加margin-top,这显然会延长表格与图像的距离。但是,我试图让它看起来充满活力。这意味着,当我单击数据时,表 2 将自动更改。

    #memberreporthistorytable2 {
    position:absolute;
    width:100%;
    margin-top:30%;
}

在我的源代码下

<tr>
        <td id="memberreporthistoryimage1">
            <asp:Image ID="Image1" runat="server" />
        </td>
        <td id="memberreporthistoryimage2">
            <asp:Image ID="Image2" runat="server" />
        </td>
        <td id="memberreporthistoryimage3">
            <asp:Image ID="Image3" runat="server" />
        </td>
        <td id="memberreporthistoryimage4">
            <asp:Image ID="Image4" runat="server" />
        </td>
        <td id="memberreporthistoryimage5">
            <asp:Image ID="Image5" runat="server" />
        </td>
    </tr>

我已将所有图像放在 td. 所有的 td 都在 tr 下。因此,我相信将我的图片 1 逐 1 包装并将其放置在我想要的地方是行不通的,因为这是我一直在做的。

请问我在哪里做错了让它动态改变位置而不是绝对位置?

问候。

4

1 回答 1

0

发生这种情况是因为您对图像进行了绝对定位。最好将这些图像包装在 div 中,然后将其放置在您想要的位置。

于 2013-08-20T07:40:39.577 回答