如何在同一行上对齐<div align =“ left”>和<div align =“ right”>

Question

我正在尝试在同一水平线上对齐。 这是我到目前为止的代码，采用了@Santa的Little Helper的建议。

HTML：

<div class="table-holder left-table">
    <Table striped bordered hover></Table>
</div>
<div class="table-holder right-table">
    <Table striped bordered hover></Table>
</div>
<div class="table-holder left-table">
    <Table striped bordered hover></Table>
</div>
<div class="table-holder right-table">
    <Table striped bordered hover></Table>
</div>

CSS：

.table-holder {
    width:50%;
}
.left-table {
    float:left;

}
.right-table {
    float:right;
}
.table-holder table {
    width:100%;
}

这是我得到的输出：

我想知道如何将前两个表放在一行中，而将后两个表放在一行中。理想情况下，右上侧的桌子与左上侧的桌子占据相同的空间。

Answer 1

有很多方法可以实现这一目标。您可以尝试使用浮点数。 方法1：

HTML：

<div class="table-holder left-table">
  <Table striped bordered hover></Table>
</div>
<div class="table-holder right-table">
  <Table striped bordered hover></Table>
</div>
<div class="clear"></div>
<div class="table-holder left-table">
  <Table striped bordered hover></Table>
</div>
<div class="table-holder right-table">
  <Table striped bordered hover></Table>
</div>

CSS：

.table-holder {
  width:50%;
}
.left-table {
  float:left;
}
.right-table {
  float:right;
}
.clear {clear:both;}
.table-holder table {width:100%;}

Demo

方法2（Flex）：

.tables-container {
  display: flex;
  flex-wrap: wrap;
}

.tables-container > div {
  flex: 0 50%;
}
.tables-container table {
  width: 100%;
}

/* --- */
table {border:1px solid black;}
table th {border:1px solid red;}
html, body {
  margin:0;
  padding:0;
}

<div class="tables-container">
  <div>
    <table>
      <tr><th>1</th><th>2Z</th></tr>
    </table>
  </div>
  <div>
    <table>
      <tr><th>1</th><th>2D</th></tr>
    </table>
  </div>
  <div>
    <table>
      <tr><th>1</th><th>2B</th></tr>
    </table>
  </div>
  <div>
    <table>
      <tr><th>1</th><th>2</th><th>3</th></tr>
    </table>
  </div>
</div>

<div>
other content
</div>