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