html - 将 3 张 table 放在左上角，第 2 张在其下方(左侧)，第 3 张放在右上角

Question

如何将 3 个表 L1、L2、R1 放在下面指定的位置:

1. 左上角的 L1
2. 左侧 L1 下方的 L2
3. 右上角的R1

table.one {
float:left;
width:45%;
}

table.two   {
width:45%;
float:right;
}

https://jsfiddle.net/Lvsu0vdz/

Answer 1

无需 Bootstrap 。给你。

 .inlineTable {
   display: inline-block;
 }
 table.one {
   width: 45%;
   display: inline-block;
 }
 table.two {
   width: 45% float: left;
 }

<div class="inline table">
  <table class="one">
    <tr>
      <th>Month-1</th>
      <th>Savings-1</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
  </table>

  <table class="one">
    <tr>
      <th>Month-2</th>
      <th>Savings-2</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
  </table>
</div>

<table class="two">
  <tr>
    <th>Month-3</th>
    <th>Savings-3</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>