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

：

.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

垂直整列：トップオーバーフローの問題を避けるために高さを最小高さに変更：

私はあなたがする必要があるすべてはあなたの .floating-boxに 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を追加する必要があります。

.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分率が残っています。

MDNまたはcss-tricksのCSSグリッドに関する詳細。