使用 CSS 将屏幕一分为二答案

【问题标题】：Splitting screen in half with CSS使用 CSS 将屏幕一分为二
【发布时间】：2017-10-05 08:22:15
【问题描述】：

我一直在使用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>

【问题讨论】：

vertical-align: top;?

标签： php html css

【解决方案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;
}

【讨论】：

【解决方案2】：

需要加上vertical-align:top;

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

示例here

【讨论】：

【解决方案3】：

添加

.floating-box table {
    word-break: break-all;
}

.floating-box {
     width: 45%;
     margin: 0px;
     border: 1px solid #73AD21;
     float: left;
}

.floating-box table {
    word-break: break-all;
}

<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>
       <tr>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem</td>
           <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
           <td>Lorem</td>
       </tr>
    </tbody>
</table>
</div>

<div class="floating-box">
     <h2>Floating box</h2>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

【讨论】：

【解决方案4】：

CSS 网格将是实现这一目标的绝佳解决方案。

这是一个例子：https://codepen.io/anon/pen/pWpgqp

HTML：

<div class="screen">
  <div class="left-side">LEFT SIDE</div>
  <div class="right-side">RIGHT SIDE RIGHT SIDE RIGHT SIDE {...}</div>
</div>

CSS：

html, body {
  margin: 0;
  padding: 0;
}

.screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100wh;
}

.left-side {
  grid-column: 1;
  border: 1px solid #000;
}

.right-side {
  grid-column: 2;
  border: 1px solid #000;
}

grid-template-columns: 1fr 1fr; 将其分成两半，因为两列占用相同的空间量，即剩余可用空间的 1 分之一。

MDN 或 css-tricks 上有关 CSS 网格的更多信息。

【讨论】：

【解决方案5】：

我相信您需要做的就是将 vertical-align: top; 添加到您的 .floating-box 中，但如果没有任何问题，这很难说，所以应该是：

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

CSS 规则几乎按照它在罐子上所说的那样做，并将所有 div 拉到垂直排列的顶部。

更多信息请访问MDN vertical-align CSS page。

我使用您的标记创建了一个 CodePen 示例，您可以在上面看到 here。

【讨论】：