如何让左table的按钮更到HTML的顶部？

Question

我有这个 HTML 代码，其中表格用 bootstrap 包裹在 Divs 周围。前 2 个顶部表被包裹在一行中，底部被包裹在另一行中。我怎样才能让“Sold By”Table 更靠前，让它看起来更好一点。

代码非常长，所以我决定不粘贴它，但如果需要，请在下面告诉我。

Answer 1

可能最简单的方法是不要有两行，而是将所有四个表分别放在一列中，然后将所有这些列放在一行中。通过使用 col-6，您可以确保最终仍然有两个相邻的表格，然后还有两个表格在下面。它看起来像这样...

<div class="row">
  <div class="col-6">
     Table 1 here
  </div>
   <div class="col-6">
     Table 2 here
  </div>
  <div class="col-6">
     Table 3 here
  </div>
  <div class="col-6">
     Table 4 here
  </div>
</div>

Answer 2

为此，我不会使用行，而是使用一个容器并为其分配两列 (column-count: 2;)。然后它应该工作。

#container {
  background-color: #aaa;
  margin: 0 auto;
  height: 500px;
  width: 500px;
  column-count: 2;
  gap: 10px;
  padding: 5px;
}

.box {  
  padding:10px;
  background-color: white;
  border: 1px solid black;
  width: 100%;  
  display: inline-block;
  box-sizing: border-box;
}

.box table {
  width: 100%;
}

<div id="container">
  <div class="box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr>      
    </table>
  </div>
  <div class="box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr> 
      <tr>
        <td>5</td>          
        <td>6</td>
      </tr>       
    </table>     
  </div>
  <div class="box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr> 
      <tr>
        <td>5</td>          
        <td>6</td>
      </tr>       
    </table>    
  </div>
  <div class="box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr>      
    </table> 
    
  </div>
</div>

如何让左table的按钮更到HTML的顶部？

How to make the button left table more to the top in HTML?

html

css

bootstrap-4