HTML5 - 水平对齐图像和 Table 内联

Question

我正在使用 Bootstrap，我想在同一列中对齐图像和 table "side-by-side"。

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 是标准的 bootstrap 类。目前在浏览器中，table 直接位于图像下方（均左对齐），尽管尝试了很多方法，但我无法让它们并排对齐。

任何指点将不胜感激。

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 并在行中定义列。 6+6 = 12 max 所以它现在应该对齐了。如果你使用容器。它将使用屏幕的整个宽度，因此您无法对齐内容。

HTML5 - 水平对齐图像和 Table 内联

HTML5 - Horizontally aligning Image and Table inline

html

twitter-bootstrap

css

inline

positioning