Logo und h1 Überschrift erscheinen in der gleichen Zeile mit HTML und CSS

Question

Ich möchte eine Webseite erstellen, stieß aber auf ein Problem, das Logo in der Nähe der Überschrift erscheinen zu lassen. Ich habe den folgenden Code ausprobiert, aber dies führt nicht zu den erwarteten Ergebnissen.

Ich habe den folgenden Code:

.line .box .header img { 
 
    float: left; 
 
} 
 

 
.line .box.header h1 { 
 
    position: relative; 
 
    top: 1px; 
 
    left: 10px; 
 
}

<div class="line"> 
 
    <div class="box"> 
 
     <div class="s-6 l-2"> 
 
     <div class="header"> 
 
      <img src="img/hrcimg.jpg" alt="logo"> 
 
      <h1>United Nations Human Rights Council</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

WEBSITE SCREEN

Answer 1

Sie müssen die Breite des .l-2 Elements erhöhen.

Wenn Sie die Breite dieses Elements auf 100% setzen, wird das Layout angezeigt, aus dem sich der Titel Ihrer Frage ergibt.

Wenn Sie niedrigere Auflösungen erreichen, müssen Sie diese Stile entsprechend anpassen, damit die Struktur zu einem bestimmten Punkt beibehalten wird.
Sobald die Auflösung mobile Proportionen erreicht, sollten Sie sie in ihren eigenen Zeilen anzeigen. Dies kann durch Setzen des Logos auf block mit width: 100%; & height: auto; erfolgen, Sie müssen auch die float Regel zu diesem Zeitpunkt beenden.

Answer 2

Also habe ich ein wenig etwas, korrigiert mich wenn ich falsch bin, wo das Logo :)

.line img { 
    float: left; 
} 

.line h1 { 
    position:relative; 
    float:left; 
    top: 1px; 
    left: 10px; 
} 

https://jsfiddle.net/3an65dfp/3/

Answer 3

Probieren Sie dies aus sein muss:

img, h1 { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<header> 
 
    <img src="http://placehold.it/100x100"> 
 
    <h1>COMPANY NAME</h1> 
 
</header>