Wie ordne ich Bilder und Text in HTML richtig?

Question

Ich habe viele Schwierigkeiten mit der korrekten Ausrichtung meines HTML-Codes. Ich baue eine Website und ich habe eine Seite, auf der ich meine Projekte vorführe. Ich muss das Bild auf der linken Seite und den Text auf der rechten Seite haben. Ich möchte jedoch, dass zwischen dem Bild und dem Text, der das Bild beschreibt, etwas Platz ist. Ich möchte auch eine Grenze haben, wie weit der Text geht, bevor er anfängt, in einer neuen Zeile zu tippen. Gerade jetzt geht der Text weiter und weiter und füllt die gesamte horizontale Linie, bevor es schließlich zur nächsten Zeile springt. Hier ist mein Code:

<style> 

    a { 
     color: #404040; 
    } 

    .bg-1 { 
     background-color: #6DBDD6; 
     color: #ffffff; 
    } 

    .container-fluid { 
     padding-top: 80px; 
     padding-bottom: 80px; 

    } 

    .img-1 { 
     float: left; 
     margin-left: 100px; 
    } 

    </style> 



<div class="container-fluid bg-1"> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <a href=""><img src="" class="img-1" height="281" width="388.9" alt="git"></a> 
    </div> 
    <div class="col-sm-8"> 
     <h2>Project Name</h2> 
     <p>Created using java, this application allows for blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p> 

     <a href="">Click here to view full code!</a> 
    </div> 
    </div> 
    </div> 

Answer 1

Zuerst verwenden Sie keine col-sm- Klasse mit dem Tag des Bildes und des Textes, wie es als Spalte in Bootstrap definiert ist.

benutzen, um Ihre zusätzliche Tags in einem col-sm

<div class="col-sm-8"> 
    <img class="theimg" src="blah.jpg"/> 
    <div class="parag">sdadasd</div> 
</div> 

Und dann können Sie das untergeordnete Element zu left

.col-sm-8 .theimg, 
    .col-sm-8 .parag { 
    float:left; 
    margin:2px; 
    } 

Hier schweben die JsFiddle