イメージとテキストをhtmlで正しく配置するにはどうすればよいですか？

Question

私は、正しく私のhtmlコードを整列することで多くの困難を抱えています。私はウェブサイトを構築しており、私は自分のプロジェクトを見せるページを持っています。私は左手側にイメージを、右手にテキストを置く必要があります。しかし、イメージとイメージを記述するテキストの間にはある程度のスペースが必要です。私はまた、新しい行の入力を開始する前に、テキストがどのくらい離れているかについて制限を設けたいと思っています。今すぐ、テキストが次々に移動し、最終的に次の行にジャンプする前に水平線全体が満たされます。ここに私のコードは次のとおりです。それは、ブートストラップの列として定義されている

<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

まず、画像のタグとテキストにcol-sm-クラスを使用しないでください。

は1 col-sm

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

にあなたの追加のタグを使用すると、あなたはJsFiddle