如何正確對齊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- ，因為它被定義為引導程序中的列。

在一個col-sm使用您的其他標簽

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

然后您可以將子元素left浮動

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

這是JsFiddle