HTML5 - イメージと表のインラインを水平に整列する

Question

私はブートストラップを使用しています。同じ列にイメージとテーブルを並べて並べたいと思います。

HTMLコード：

<div class="col-md-10" style="width: 100%"> 
     <img src="#" class="img-responsive pull-left pro-page-pro-image"> 
     <div class="container"> 
     <table class="table table-responsive pull-right pro-page-contact-details-table"> 
     <tbody> 
<!---the table has 12 rows in total --> 
      <tr> 
       <td>MEMBER SINCE</td> 
       <td>2007</td> 
      </tr> 
      <tr> 
      <td>Suburb</td> 
      <td>Fourways, Randburg</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 

関連するCSS：

.pro-page-pro-image { 
    display:inline; 
    margin-top: 4%; 
    margin-left: 11%; 
    margin-right: 11%; 
    margin-bottom: 4%; 
} 
.pro-page-contact-details-table { 
    display: inline; 
    } 

クラス.tableと.table-responsiveは、標準のブートストラップ・クラスです。ブラウザの現時点では、テーブルは画像の真下に配置されています（左揃え）。何度も試してみても、並べて並べることはできません。

いずれのポインタも大歓迎です。

Answer 1

私は、このされるべきだと思う：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="col-md-10" style="width: 100%"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <img src="https://dummyimage.com/300x200/000/fff" class="img-responsive pull-left pro-page-pro-image"> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <table class="table table-responsive pull-right pro-page-contact-details-table"> 
 
     <tbody> 
 
      TABLE HERE 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>

あなたはROWを使用して、行のuが列を定義する必要があります。 6 + 6 = 12マックスなので、今すぐ整列する必要があります。コンテナを使用する場合。それは画面の全幅を使用するので、あなたはものをアレンジすることはできません。