HTML5 - 水平對齊圖像和表內聯

Question

我使用Bootstrap，我想在同一列中將圖像和表「並排」對齊。

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>

你需要使用一個行和列u中定義的列。 6 + 6 =最大值12，所以現在應該對齊。如果你使用容器。它會使用屏幕的整個寬度，所以你不能對齊的東西。