Bild überschrieben, wenn ich eine Marge

Mit diesem HTML-Code festgelegt:Bild überschrieben, wenn ich eine Marge

<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>

Es funktioniert gut, aber ich brauche einen linken Rand von 50px vor MyImage2 hinzuzufügen. Also aktualisiere ich meinen Code auf diese Weise.

<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>

Mit diesem Code habe ich eine Antwort Problem. Wenn ich die Fenstergröße reduziere, überschreibt das "andere HTML-Zeug", das auf dem rechten Bild angezeigt wird, das Bild2 von 50 Pixeln.

Wie kann ich den richtigen Frame haben, um den rechten Teil meines image2 nicht zu überschreiben?

Ich habe versucht, die Breite der td und/oder Tabelle Tage zu erhöhen, es hat nicht für mich gearbeitet. Also hoffentlich kann mir da jemand helfen.

EDIT: Sie können das Problem überprüfen auf diesen Link: http://www.bootply.com/t1hF1cHuD2 das Fenster reduzieren rechten Rahmen zu haben, den linken Rahmen zu überschreiben (das ist, was ich will geschehen nicht)

Quelle

2016-12-02 A.D.

Überprüfen Sie, ob Sie td {overflow: visible} setzen können. Verwenden Sie außerdem eine separate CSS-Datei, um Ihren Code sauber zu halten. –

Es hängt von dem gewünschten Ergebnis ab. Wenn Sie möchten, dass der Text der Ausrichtung der Bilder folgt (eingerückt), haben Sie den falschen Layouttyp (vertikale feste Spalten, Text kann nicht eingerückt werden). Wenn Sie den gesamten Text nach rechts verschieben möchten, ohne sich zu überlappen, dann ist das etwas anderes. – Baro

Nun, da der linke Rand: 50 das Bild nach rechts verschiebt, muss ich auch die "anderen HTML-Sachen" verschieben. Oder die Breite der ganzen linken Tabelle zu erhöhen, aber ich habe es nicht geschafft. –

Versuchen Sie nicht inline zu verwenden Stile, da es manchmal Probleme verursachen kann, schlage ich vor, einen Abschnitt in der Kopfzeile zu machen und zu versuchen, Rand links zu setzen: 50px! wichtig; und schau, ob das funktioniert. Sie können auch position: relative; und verwenden Sie die Eigenschaften oben links und rechts unten, um sie an die gewünschte Position zu verschieben.

Quelle

2016-12-02 15:42:53

Das Layout verwendet Spalten mit einer prozentualen Breite (25%). Wenn Sie also die Logik des Layouts nicht ändern möchten, besteht die einfachste Lösung darin, den gleichen Rand zum richtigen Inhalt hinzuzufügen, um immer vom Bild weg zu bleiben.

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

Hier das Beispiel. Mit den Farben können Sie sehen, was mit Ihren Spalten (und Inhalten) in responsive geschieht: JS Fiddle link

Quelle

2016-12-02 17:36:44 Baro

thx für den aktualisierten Link. Aber in diesem Fall überschreibt das linke Bild sie gelben Block. Gibt es eine Möglichkeit, den linken roten Block zu erweitern, so dass das linke Bild darin klebt und keiner der 2 Blöcke den anderen Teil überschreibt? –

Bild überschrieben, wenn ich eine Marge

Antwort

Verwandte Themen