Div 和并排的桌子

Div and a Table side by side?

本文关键字：Div 更新时间：2023-09-26

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

将所有内容都放在父div 中，给父div display:inline-block

然后给你的孩子floatdiv 的右/左

div

例

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

在您的

网页中使用此 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;
    }

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

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

没有找到相关文章