使用 CSS 將屏幕分成兩半

Question

我一直在使用這個， W3 Schools ， 一個有類似問題的 stackoverflow 頁面，使我的表格（在一個 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;
}

Answer 2

您需要添加vertical-align:top;

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

例子在這里

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 Grids 將是實現這一目標的絕佳解決方案。

這是一個例子： 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 網格。

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 垂直對齊 CSS 頁面上找到更多信息。

我使用上面的標記創建了一個 CodePen 示例，您可以在此處查看。