Div 和 Table 并排？答案

【问题标题】：Div and a Table side by side?Div 和 Table 并排？
【发布时间】：2013-11-01 10:06:30
【问题描述】：

所以我有 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>

【问题讨论】：

JSFiddles 很好，但请在问题中包含您的代码。
需要对定位进行一些调整，但两个元素上的 display: inline-block; 和 float: left 都可以正常工作。
那个fiddle只有带表格的div，而带表格的那个在哪里？该潜水的 ID 为“existing_ledgers”，但该 ID 根本没有 CSS xD
请用您的代码创建一个小提琴并在此处显示。让我们更轻松。
大家可以在给出的网页链接上查看表格！

标签： javascript php html css web

【解决方案1】：

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

然后将float right/left 分配给您的子 div

Example

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

【讨论】：

【解决方案2】：

在你的网页中使用这个 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;
    }

【讨论】：

i.imgur.com/izCyidk.jpg...works 但我需要 center.50% 表格和 50% 表格中的 div
ok 并添加这个 div#ledger-form { margin: 0 auto;最大宽度：83.667em； }

【解决方案3】：

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

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

【讨论】：