html - 如果我设置边距，图像会被覆盖

Question

使用此 html 代码:

<div class="container-fluid" >
        <div class="row">
            <div class="col-md-3" >
              <table id="Table" width="100%">
                    <tr>
                        <td    align="left" valign="middle" >
                            <img src="MyImage" width="220" height="200">
                        </td>
                    </tr>



                    <tr>
                        <td width="251" height="400" align="left" valign="top" >

                            <p style="margin-top: 20px; margin-bottom: 0px;">
                                <img src="MyImage2" width="220" height="200">
                            </p>                           
                        </td>
                    </tr>
                </table> 
            </div>

            <div class="col-md-9 "  >

            <form id="form1" class="form-horizontal" runat="server" >
                      <div " align="left" >
                Some other HTML stuff
                          </div>
            </form>
          </div>

        </div>
    </div>

它工作正常，但是，我需要在 MyImage2 之前添加 50px 的左边距。 所以我以这种方式更新我的代码。

<div class="container-fluid" >
        <div class="row">
            <div class="col-md-3" >
              <table id="Table" width="100%">
                    <tr>
                        <td    align="left" valign="middle" >
                            <img src="MyImage" width="220" height="200">
                        </td>
                    </tr>



                    <tr>
                        <td width="251" height="400" align="left" valign="top" style="margin-left: 50px;">
<!-----------------50 px margin added------------->
                            <p style="margin-top: 20px; margin-bottom: 0px;margin-left: 50px;">
                                <img src="MyImage2" width="220" height="200">
                            </p>                           
                        </td>
                    </tr>
                </table> 
            </div>

            <div class="col-md-9 "  >

            <form id="form1" class="form-horizontal" runat="server" >
                      <div " align="left" >
                Some other HTML stuff
                          </div>
            </form>
          </div>

        </div>
    </div>

对于这段代码，我遇到了响应问题。 如果我减小窗口大小，右框架上显示的“其他 HTML 内容”将覆盖 50 像素的 image2。

如何让正确的框架不覆盖图像 2 的正确部分？

我试图增加 td 和/或表格标签的宽度，但它对我不起作用。所以希望有人可以帮助我。

编辑: 您可以在此链接上检查问题: http://www.bootply.com/t1hF1cHuD2 缩小窗口，使右框架覆盖左框架(这是我不想发生的事情)

Answer 1

尽量不要使用内联样式，因为有时它会导致问题，我建议在标题中制作一个部分并尝试放置 margin-left:50px !important;看看是否有效。你也可以使用 position:relative;并使用左上右下属性将其移动到您想要的位置。