javascript - Div 和 Table 并排？

Question

所以我有 2 个 Div，一个带有表格，一个带有表格。问题是表格 div 低于表单 div。我尝试使用浮动权利，并溢出 css 属性。但仍然没有成功。我的表格的 CSS 样式：jsFiddle

完整网页在这里

HTML：

<div id="existing_ledgers">
  <table>
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>James</td>
        <td>Matman</td>
        <td>Chief Sandwich Eater</td>
      </tr>
      <tr>
        <td>The</td>
        <td>Tick</td>
        <td>Crimefighter Sorta</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

使用 float left 和定义的容器宽度：它们必须适合容器，两者都是 50% 宽将解决问题。在这里你有一个工作示例：http: //jsfiddle.net/qLGJt/

#one, #existing_ledgers{float:left; width:50%; }

Answer 2

把所有东西都放在一个父 div 中，给父 divdisplay:inline-block

然后将float右/左给您的孩子 div

例子

#registration-form {
    display: inline-block;
    float: left;        
}
#existing_ledgers {
    display: inline-block;
    float: left;        
}

Answer 3

在你的网页中使用这个 CSS

 .DA_custom_form {
        float: left;
        margin: 0 auto 5em;
        max-width: 600px;
        padding: 0 10px;
        position: relative;
        z-index: 1;


      }

    #el {
        float: right;
        margin: 0 auto;
        max-width: 600px;
    }