CSS-Klasse nicht korrekt auf Bild vor Ort

Question

Zum ersten Mal Website-Builder, so bin ich immer noch ein bisschen wackelig darüber, wie genau CSS für HTML-Dokumente gilt.

Ich versuche meine Seite in 2 Divs zu teilen, die jeweils 50% nehmen. Die linke enthält ein Bild, während die rechte Text enthält. Dies bildet eine Seite-an-Seite-Konfiguration.

Wenn ich meinen Code als solche eingeben:

<div class="infobox"> 
    <div style="float:left;width:50%;"> 
     <img src="foo.jpg" style="max-width:95%;height:auto;margin-top:10%;border-radius:10%;overflow:hidden;" alt=""> 
    </div> 
    <div style="margin-left:51%;"> 
     <h1>MAIN PAGE</h1> 
     <p>Welcome to the page. This is a test message for the time being. This will eventually become 
        replaced by full text.</p> 
     <p>Welcome to the page. This is a test message for the time being. This will eventually become 
        replaced by full text.</p> 
     <p>Welcome to the page. This is a test message for the time being. This will eventually become 
        replaced by full text.</p> 
     <p>Welcome to the page. This is a test message for the time being. This will eventually become 
        replaced by full text.</p> 
     <p>Welcome to the page. This is a test message for the time being. This will eventually become 
        replaced by full text.</p> 
    </div> 
</div> 

alles wie erwartet funktioniert. Das Bild bleibt in seinem div, hat abgerundete Ränder usw.

Wenn ich jedoch versuche, den css-Code in meine master.css-Datei zu verschieben, bricht alles. Mein Code ist wie folgt:

<div class="infobox"> 
      <div style="float:left;width:50%;"> 
       <img class="image-style" src="foo.jpg" alt=""> 
      </div> 
      <div style="margin-left:51%;"> 
       <h1>MAIN PAGE</h1> 
       <p>Welcome to the page. This is a test message for the time being. This will eventually become 
       replaced by full text.</p> 
       <p>Welcome to the page. This is a test message for the time being. This will eventually become 
       replaced by full text.</p> 
       <p>Welcome to the page. This is a test message for the time being. This will eventually become 
       replaced by full text.</p> 
       <p>Welcome to the page. This is a test message for the time being. This will eventually become 
       replaced by full text.</p> 
       <p>Welcome to the page. This is a test message for the time being. This will eventually become 
       replaced by full text.</p> 
      </div> 
     </div> 

Und in meiner master.css Datei:

.image-style { 
    max-width: 95%; 
    height: auto; 
    margin-top: 10%; 
    margin-left: 10%; 
    border-radius: 10%; 
    overflow: hidden; 
} 

Wenn dieses zweite Verfahren verwendet wird, Side-by-Side-Konfiguration bricht. Das Bild nimmt nun 100% des Bildschirms ein, der Text befindet sich immer noch in der richtigen Position darüber. Darüber hinaus gelten keine meiner Stiländerungen für das Bild. Ich verstehe nicht; Vererbt das Bild nicht seine Größen-/Positionierungseinschränkungen von dem Div, in dem es sich befindet? Warum erbt es in diesem Format nicht das darüber liegende div und warum akzeptiert das Bild den Klassenstil nicht?

Ich fühle mich, als würde ich etwas völlig Offensichtliches vermissen, aber ich kann es nirgends sehen. Jede Hilfe wird sehr geschätzt.

Answer 1

Wenn Sie externe CSS-Datei korrekt verknüpft haben, löschen Sie einfach den Browser-Cache und versuchen Sie es.

Answer 2

Bitte hinzufügen Schwimmer: links; an die Bildklasse, wenn Sie richtig verbunden sind Ihre externen css

.image-style { 
    max-width: 95%; 
    height: auto; 
    float:left; 
    margin-top: 10%; 
    margin-left: 10%; 
    border-radius: 10%; 
    overflow: hidden; 
}