我怎樣才能讓用普通HTML/CSS一個「漂亮」的表溢出

我有一個div（基本的文本輸出，沒有表等還），例如字的兩排我怎樣才能讓用普通HTML/CSS一個「漂亮」的表溢出

a b c d e f g h i 
1 2 3 4 5 6 7 8 9

現在這些列表可能很長，格式可以在小型監視器上輕鬆拆分。它看起來像這樣：

a b c d e f 
g h i 
1 2 3 4 5 6 
7 8 9

但我想有它這樣的：

a b c d e f 
1 2 3 4 5 6 

g h i 
7 8 9

我怎樣才能做到這一點？我想使用純HTML功能，沒有Javascript的依賴。

來源

2015-06-12 undefined

你使用其他語言嗎？ –

你允許修改HTML結構嗎？ –

只是HTML5/CSS3。我想避免NoScript之類的依賴，比如Javascript。 – undefined

幾個方法，你可以接近這樣的：

1）使用的表。將表格放在容器DIV中，overflow-x CSS屬性設置爲auto。當屏幕空間太小時，這將使您的桌面向左和向右滾動。

2）包裹的div每一行是一個容器（div，span等）和其white-space CSS屬性設置爲nowrap。在屏幕空間太小時，在包含DIV上再次使用CSS屬性overflow-x: auto來使容器滾動。

3），而不是兩個行文字，使在它自己的各DIV名稱/值對，並漂浮的DIV到左側。當內容包裝時，對將換到下一行：

<div class="floatMe">a<br>1</div> 
<div class="floatMe">b<br>2</div> 
<div class="floatMe">c<br>3</div> 
... 
<div class="floatMe">ZZZ<br>999</div> 

.floatMe { 
    float: left; 
    /* add width, padding, margin, etc to taste */ 
}

呈現這樣的：

A B C D E F G H I J K L M 
1 2 3 4 5 6 7 8 9 10 11 12 13 

N O P Q R S 
14 15 16 17 18 19

來源

2015-06-12 20:10:36

第三個選項很有趣，對於那個第一個是 – aw04

我會說第一個是樹的最佳選擇，只是因爲如果它看起來像一隻鴨子，它就像一隻鴨子一樣嘎嘎作響，它就像一隻鴨子，更好的呼叫它是一隻鴨子。即，表格是表格。留下那是:)但這可能是一個純粹的一代的事情:) –

@GerardvanHelden我不反對，它可能不適合在大多數情況下，但＃3是唯一一個實現有問題的結果 – aw04

您可以使用一個大line-height和負margin-bottom這等於兩次line-height做到這一點：

div { 
 
    font-size: 20px; 
 
    width: 100px; 
 
    padding: 0.5em; 
 
    line-height: 4em; 
 
    margin-bottom: -8em; 
 
    font-family: monospace; 
 
}

<div>a b c d e f g h i</div> 
 
<div>1 2 3 4 5 6 7 8 9</div>

來源

2015-06-12 20:45:33

我怎樣才能讓用普通HTML/CSS一個「漂亮」的表溢出

回答

相關問題