Align Bild direkt neben <h> Tag

Question

Ich begann vor ein paar Tagen HTML und CSS zu lernen und bekam jetzt ein Problem:

#referenzen{ 
 
     width: 100%; 
 
     padding: 25px; 
 
    
 
    } 
 

 
    #referenzen h1, h2, h3, h4, h5, h6{ 
 
     margin-bottom: 0; 
 
    } 
 

 
    #referenzen p{ 
 
     padding-right: 25px; 
 
     font-size: 18px; 
 
    } 
 

 
    #referenzen img{ 
 
     height: 50px; 
 
     width: 50px; 
 
     float: left; 
 
    }

<div id="wrapper"> 
 
    <div id="referenzen"> 
 
     <img src="../Bilder/info.png"> 
 
     <h1>Unsere Firmengeschichte</h1> 
 
     <br> 
 
     <p>Die Firma Fair-Bau GmbH wurde im April 2010 gegründet und betätigt sich in den Sparten ausführende Baumeisterarbeiten, Vollwärmeschutzarbeiten, Verputzarbeiten sowie dem Handel mit Baustoffen. 
 
      Der Betrieb beschäftigt 15- 20 Mitarbeiter. \t </p> 
 
    </div>

Wie kann ich das Bild direkt mit dem Tag zuzuweisen so dass es direkt daneben ist?

Die Seite im aktuellen Zustand Es ist: http://imgur.com/a/IprOF

Vielen Dank im Voraus!

Answer 1

Sie könnten einfach margin-top: 15px auf das Bild.

#referenzen { 
 
    width: 100%; 
 
    padding: 25px; 
 
} 
 
#referenzen h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    margin-bottom: 0; 
 
} 
 
#referenzen p { 
 
    padding-right: 25px; 
 
    font-size: 18px; 
 
} 
 
#referenzen img { 
 
    height: 50px; 
 
    width: 50px; 
 
    float: left; 
 
    margin-top: 15px; 
 
}

<div id="wrapper"> 
 
    <div id="referenzen"> 
 
    <img src="http://vignette2.wikia.nocookie.net/dccu/images/b/bc/Icon-Wikipedia.png/revision/latest?cb=20160324075444"> 
 
    <h1>Unsere Firmengeschichte</h1> 
 
    <br> 
 
    <p>Die Firma Fair-Bau GmbH wurde im April 2010 gegründet und betätigt sich in den Sparten ausführende Baumeisterarbeiten, Vollwärmeschutzarbeiten, Verputzarbeiten sowie dem Handel mit Baustoffen. Der Betrieb beschäftigt 15- 20 Mitarbeiter.</p> 
 
    </div>

Answer 2

Es gibt zwei Möglichkeiten, wie ich es tun würde:

• In HTML: Sie könnten die <img> -tag einfügen in dir <h1></h1> -tag
• in CSS: Sie h1 und img-display: inline-block setzen konnte

Ich würde die erste bevorzugen.

EDIT zum besseren Verständnis:

Die Tags <h1>...<h6> eine Standard display von block haben, das heißt, sie verfügt über insgesamt 100% Breite des übergeordneten Container nehmen. Wenn Sie es in Inline-Block ändern, wird die 100% -Breite zerstört und auf einen festgelegten width-Wert reduziert, oder wenn dies nicht auf die Größe der enthaltenen Elemente gesetzt wird.