Float Bilder auf beiden Seiten des Textes

Question

Ich versuche, ein Bild auf beiden Seiten eines Absatzes zu schweben. Wenn ich dies tue, bleibt nur der linke img in der Zeile, während der zweite einfach unter den Text geht. Wie würde ich das beheben?

<img class="logo-imgl" src="img/logo.png" height= 300px width= 400px /> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl ut leo interdum cursus. In interdum ipsum dui, id faucibus tellus consequat nec. Fusce viverra hendrerit diam, eget ultrices lacus. Sed porta, ex ut auctor dignissim, arcu ante condimentum justo, et cursus sem metus et purus. Pellentesque imperdiet ligula et blandit tristique. Proin placerat suscipit nisi vel viverra. Proin nec neque ut dolor blandit tincidunt id eget ligula. Mauris et tortor at leo pretium lacinia.</p> 
<img class="logo-imgr" src="img/logo.png" height= 300px width= 400px /> 

hier ist die CSS:

.logo-imgl{ 
    float:left; 
} 
.logo-imgr{ 
    float:right; 
} 

Answer 1

beiden Bilder vor dem Absatz Put. Ich habe beide Größen auf eine Breite von nur 30 Pixeln geändert, damit es im Snippet korrekt angezeigt wird.

.logo-imgl{ 
 
    float:left; 
 
} 
 
.logo-imgr{ 
 
    float:right; 
 
}

<img class="logo-imgl" src="img/logo.png" height="30" width="40" /> 
 
<img class="logo-imgr" src="img/logo.png" height="30" width="40" /> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl ut leo interdum cursus. In interdum ipsum dui, id faucibus tellus consequat nec. Fusce viverra hendrerit diam, eget ultrices lacus. Sed porta, ex ut auctor dignissim, arcu ante condimentum justo, et cursus sem metus et purus. Pellentesque imperdiet ligula et blandit tristique. Proin placerat suscipit nisi vel viverra. Proin nec neque ut dolor blandit tincidunt id eget ligula. Mauris et tortor at leo pretium lacinia.</p>

Answer 2

try this IST AUF Bootstrap

<div class="container"> 
     <div class="row"> 
     <div class="col-md-4"> 
      <img class="logo-imgl" src="img/logo.png" height="30" width="40" /> 
     </div> 
     <div class="col-md-4"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl ut leo interdum cursus. In interdum ipsum dui, id faucibus tellus consequat nec. Fusce viverra hendrerit diam, eget ultrices lacus. Sed porta, ex ut auctor dignissim, arcu ante condimentum justo, et cursus sem metus et purus. Pellentesque imperdiet ligula et blandit tristique. Proin placerat suscipit nisi vel viverra. Proin nec neque ut dolor blandit tincidunt id eget ligula. Mauris et tortor at leo pretium lacinia.</p> 
     </div> 
     <div class="col-md-4"> 
      <img class="logo-imgl" src="img/logo.png" height="30" width="40" /> 
     </div> 
     </div> 
    </div>