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>

使用此代码，我有一个响应问题。如果我缩小窗口大小，那么＆＃34;其他HTML内容＆＃34;显示在右侧框架上会覆盖50像素的图像2。

如何才能让正确的框架不覆盖图像的右侧部分？

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

编辑：您可以在此链接上查看问题： http://www.bootply.com/t1hF1cHuD2 缩小窗口以使右框架覆盖左框架（这是我不希望发生的事情）

Answer 1

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

Answer 2

使用宽度百分比（25％）的列的布局。因此，如果您不想更改布局的逻辑，最简单的解决方案是在正确的内容中添加相同的边距，以便始终远离图像。

<div align="left" style="margin-left:50px;" >

这里的例子。通过颜色，您可以看到响应中的列（和内容）会发生什么：JS Fiddle link

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

2 个答案: