CSSの垂直スクロールの代わりにテキストを右にシフト

Question

divの高さは200pxとします。私はそのdivの中にいくつかのデータを表示しています。私はこのようなデータを表示したい：

AEI

BFJ

CGK

DHL

--------------------- -------- この高さは200px

私は垂直スクロールバーを必要としません。私は特定の高さの後、データが右にシフトし、再び上から始まることを意味します。

私はcolumn-countプロパティを使用しているが、私は をしたいと、それが機能していません。

誰でもお勧めできますか？あなただけの各行の3つの項目を追加した後<br />要素を使用することができます

.mydivclass { 
    height: 200px; 
    word-wrap:break-word; 
    width: 100%; 
    position: fixed; 
    overflow:hidden; 
    max-height:200px; 
    top: 0; 
    left: 0; 
} 

Answer 1

これは

display: flex; 
flex-direction: column; 
flex-wrap: wrap; 

例

.mydivclass { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    
 
    height: 200px; 
 
    width: 0; 
 
} 
 

 
/* just some styling 
 
    --------------------- */ 
 
.mydivclass * { 
 
    width: 48px; 
 
    height: 48px; 
 
    
 
    border: 1px solid red; 
 
    
 
    color: white; 
 
    background: blue; 
 
    text-align: center; 
 
    line-height: 48px; 
 
}

<div class="mydivclass "> 
 
    
 
    <span>A</span> 
 
    <span>B</span> 
 
    <span>C</span> 
 
    <span>D</span> 
 
    
 
    <span>E</span> 
 
    <span>F</span> 
 
    <span>G</span> 
 
    <span>H</span> 
 
    
 
    <span>I</span> 
 
    <span>J</span> 
 
    <span>K</span> 
 
    <span>L</span> 
 
    
 
</div>

に親にフレキシボックスを使用して行うことができます

Answer 2

：

私のCSSは次のようになります。またはPHPの例では、カウンタを作成し、3つのデータ項目を追加した後、カウンタをリセットしてブレーク要素を追加します。あなたも、テーブルを使用して検討することもできますが、それは非常にあなたが表示したいデータに依存