如何在同一行对齐 <div align="left"> 和 <div align="right"> [重复]答案

【问题标题】：How to align <div align="left"> and <div align="right"> on the same line [duplicate]如何在同一行对齐 <div align="left"> 和 <div align="right"> [重复]
【发布时间】：2019-12-04 10:20:45
【问题描述】：

我正在尝试对齐并在同一水平线上。这是我目前的代码，采纳了@Santa's 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%;
}

这是我得到的输出：

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

【问题讨论】：

为 div 设置一些宽度。另外，
是块元素，所以设置为 display: inline;
嗨塞巴斯蒂安，我做了第一个建议。现在一切都向左对齐。
你的意思是，你想在同一行有 2 个表，然后在下一行再有 2 个表？
您的 CSS 输出正确，请附上您想要的结果的图片。
嗨@Santa'sLittleHelper，没错！

标签： html css

【解决方案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（灵活）：

.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>

【讨论】：

嗨@Santa'sLittleHelper，感谢您的帮助。我进行了以下更改，但现在第二、第三和第四列都在屏幕的右侧。
@SkipperLin 你在用什么 UI 库？
嗨@Santa'sLittleHelper，我认为我没有使用任何特定的 UI 库。
嗨@Santa'sLittleHelper，我刚刚修改了问题以反映使用您的建议所做的更改。
@SkipperLin 我已经编辑了我的帖子，并使用 Flex 添加了另一个解决方案