php - 使用 CSS 将屏幕分成两半

Question

我一直在使用 this , W3 Schools , a stackoverflow page with similar problem使我的表格(在一个 div 中)内联到页面后半部分的另一个 div。

我试图用垂直分隔线分割我的屏幕，但是由于右侧填充了内容，它导致左侧下沉页面

左侧唯一的内容是一个 PHP 填充的表格，但我觉得这是导致对齐的代码部分。

所以看起来像这样但是我希望能够将内容添加到右侧 div 而不会导致左侧下拉:

代码:

.floating-box {
  display: inline-block;
  width: 45%;
  height: 75px;
  margin: 0px;
  border: 1px solid #73AD21;
}

<div class="floating-box">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
        <th>Column 11</th>
        <th>Column 12</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($allArray  as $key => $value) { ?>

      <?php } ?>
    </tbody>
  </table>
</div>

<div class="floating-box">
  <h2>Floating box</h2>

</div>

Answer 1

添加 vertical-align:top 并将 height 更改为 min-height 以避免溢出问题:

.floating-box {
     display: inline-block;
     vertical-align:top;
     width: 45%;
     min-height: 75px;
     margin: 0px;
     border: 1px solid #73AD21;
}