圖像覆蓋，如果我設置了保證金

使用此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前增加50像素的左邊距。所以我用這種方式更新我的代碼。

<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像素的圖像2。

如何讓正確的框架不會覆蓋image2的正確部分？

我試圖增加td和/或表tage的寬度，它不適合我。所以希望有人能幫助我。

編輯：可以檢查問題此鏈接： http://www.bootply.com/t1hF1cHuD2 縮小窗口有右框架覆蓋左幀（這是我想不發生）

來源

2016-12-02 A.D.

檢查是否可以設置td {overflow：visible}。另外，使用一個單獨的css文件來保持你的代碼清潔。 –

這取決於你想要的結果。如果您希望文本遵循圖像的對齊方式（縮進），那麼您的佈局類型是錯誤的（垂直固定列，不能縮進文本）。如果您想將整個文本向右移不重疊，那麼這是另一回事。 – Baro

好吧，由於左邊距：50將圖像右移，所以我需要「其他HTML內容」也會移動。或增加整個左表的寬度，但我沒有設法做到這一點。 –

儘量不要在線使用樣式有時可能會導致問題，我建議在標題中添加一段，並嘗試將margin-left：50px！important;並看看是否有效。你也可以使用position：relative;並使用左上角的右下角屬性將其移動到您想要的位置。

來源

2016-12-02 15:42:53

使用具有寬度百分比（25％）的列的佈局。因此，如果您不想更改佈局的邏輯，最簡單的解決方案是將相同的邊距添加到正確的內容，以便始終遠離圖像。

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

這裏的例子。使用這些顏色，您可以看到響應中的列（和內容）會發生什麼情況：JS Fiddle link

來源

2016-12-02 17:36:44 Baro

thx爲更新的鏈接。但在這種情況下，左圖覆蓋了它們的黃色區域。有沒有辦法擴展左邊的紅色陣營，讓左邊的陣營堅持到底，而這兩個陣營都沒有覆蓋其他陣營？ –

圖像覆蓋，如果我設置了保證金

回答

相關問題