Erstellen einer Website Landing Page mit Inline-Elementen

Question

Ich versuche, eine Überschrift mit zwei Inline-Elementen darin, Bild und Text zu erstellen. Was werde ich für (I umkreist die beiden Elemente):

Wie würde ich über diese gehen? Ich habe versucht, den Text nach rechts zu schweben, aber er nimmt den ganzen Bildschirm ein (keine Größenänderung).

Answer 1

Wenn ich verstanden richtig, sollte es ein Bild nach links und nach dem rechten Ende des Bildes, sollte es einen beschreibenden Text geben?

Wenn das der Fall ist, (unter den vielen) eine Option ist ein margin-left zum element zu geben, die den Text hält und wir sollten die Größe des Bildes weiß, es richtig zu tun:

.header { 
 
    background: url(" http://placehold.it/350x350") no-repeat; 
 
} 
 
.content { 
 
    margin-left: 355px; 
 
}

<div class="header"> 
 
    <div class="content"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. End! 
 
    </div> 
 
</div>

Answer 2

Es gibt viele Möglichkeiten, es zu tun, aber ein Gittersystem können Sie die beiden Objekte in einer Reihe setzen würde dann schweben sie wie folgt links:

* { 
 
-webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    
 
} 
 

 
.row { 
 
width: 100%; 
 
    clear: both; 
 
    border: 1px solid blue; 
 
} 
 

 
.onehalf { 
 
width: 50%; 
 
    float: left; 
 
    border: 1px solid red; 
 
}

<div class="row"> 
 
<div class="onehalf">THING ONE</div> 
 
    <div class="onehalf">THING TWO</div> 
 
</div>