Question

我一直在使用this，W3 Schools，a stackoverflow page with similar problem让我的表（在div中）内联到页面后半部分的另一个div。

我试图用垂直分割来分割我的屏幕，但是当右侧填充了内容时，它会导致左侧下沉到页面

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

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

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

添加 vertical-align：top 也将高度更改为min-height以避免溢出：

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

Answer 2

您需要添加vertical-align：top;

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

示例here

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

Answer 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;将分割成两半，因为两列都占用相同的空间，即剩余可用空间的一小部分。

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

Answer 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。

使用CSS将屏幕分成两半

5 个答案: