Jak utworzyć przepełnienie tabeli "pretty" zwykłym kodem HTML/CSS

Question

Mam dwa wiersze słów w dziale div (podstawowe wyniki tekstowe, brak tabel itp.), Np.

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

Teraz te listy mogą być bardzo długie, a format łatwo się zmienia na małych monitorach. Wygląda to tak:

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

Ale chciałbym mieć to tak:

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

g h i 
7 8 9 

W jaki sposób można to osiągnąć? Chciałbym użyć zwykłej funkcjonalności HTML, bez zależności Javascript.

Answer 1

Kilka sposobów można podejść do tego:

1) Za pomocą tabeli. Umieść stół wewnątrz kontenera DIV z właściwością CSS overflow-x ustawioną na auto. Spowoduje to przewijanie stołu w lewo i w prawo, gdy miejsce na ekranie jest zbyt małe.

2) owinąć każdą linię div jest kontenerem (div, span, etc) i ustawić jego właściwość white-space CSS nowrap. I na zawierającej DIV, ponownie użyj właściwości CSS overflow-x: auto, aby przewinąć kontener, gdy miejsce na ekranie jest zbyt małe.

3) zamiast dwóch linii tekstu, utwórz każdą parę nazwa/wartość we własnym DIV i przenieś DIV w lewo. Gdy okłady treści, para będzie zawijać do następnej linii:

<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 */ 
} 

Renders tak:

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 

Answer 2

Można tego dokonać za pomocą dużej line-height i negatywny margin-bottom który jest równy dwukrotności 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>