分割屏幕一半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;您.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。

Answer 2

add vertical-align：top也将高度更改为最小高度以避免溢出问题：

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

Answer 3

您需要添加vertical-align：top;

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

例如here

Answer 4

添加

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

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分之一。

更多关于CSS网格的文章MDN或css-tricks。