Text schwebt nur eine Zeile neben Bild

Question

Gelöscht alle zusätzlichen Sachen, alles was ich will ist die Zeile float links so gibt es einige Text neben dem Bild, aber es bewegt sich nur über eine Zeile. Verwenden Sie Bootstrap wenn das hilft, zusammen mit meiner eigenen CSS Datei.

example

<!--main body container --> 
<div class="container"> 
    <div class="col-sm-6"> 
    <div class="row"> 
     <h1>About Me</h1> 
    </div> 
    <div id="bio" class="row"> 
     <img src= "assets/images/linkedin-logo.png" alt="default photo"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur. 
    </div> 
    </div> 
<!--Main Container End--> 
</div> 

CSS-Code:

#bio { 
    float: left; 
} 

Answer 1

Float Ihr Bild nach links

#bio img { 
    float: left; 
} 

Beispiel: https://jsfiddle.net/L75dhtny/

Answer 2

können Sie versuchen, dieses:

<!--main body container --> 
<div class="container"> 
    <div class="col-sm-6"> 
      <div class="row"> 
       <h1>About Me</h1> 
      </div> 
      <div id="bio" class="row"> 
       <img src= "assets/images/linkedin-logo.png" alt="default photo"> 

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur. 
      </div> 
    </div> 
<!--Main Container End--> 
</div> 

DEMO HERE

Answer 3

Sie können versuchen, diese -

/* css code */   
 
    img { 
 
     float: left; 
 
     padding:2px; 
 
     margin-right:4px; 
 
    }

<!--main body container --> 
 
<div class="container"> 
 
    <div class="col-sm-6"> 
 
      <div class="row"> 
 
       <h1>About Me</h1> 
 
      </div> 
 
      <div id="bio" class="row"> 
 
      <img src="http://placehold.it/350x150"> 
 

 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur. 
 
      </div> 
 
    </div> 
 
<!--Main Container End--> 
 
</div>

Answer 4

hinzufügen

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">