我有一個div高度假設爲200px。我在該div中顯示一些數據。我想說明這樣的數據：在CSS中向右移動文本而不是垂直滾動

AEI

BFJ

CGK

DHL

--------------------- -------- 這個高度是200px

我不想要任何垂直滾動條。我的意思是在一定的高度之後，數據會向右移動，再從頂部開始。

我已使用column-count屬性，但它不工作，因爲我想要。

任何人都可以請建議？

我的CSS是這樣的：

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

來源

2017-04-09 Sayandip Ghatak

這可以使用Flexbox的父

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>

完成

來源

2017-04-09 15:33:51 arcs

像夢一樣工作，謝謝:) –

你可以只使用<br />元素上的每一行增加3項之後。或者用php for exmaple，創建一個計數器，並在添加3項數據後，重置計數器並添加一箇中斷元素。你甚至可以考慮使用一個表，但是這在很大程度上取決於你要顯示的數據

來源

2017-04-09 15:13:20

其實數據的長度並不固定。 –

在CSS中向右移動文本而不是垂直滾動

回答

例如

相關問題