Làm cách nào để tạo một bảng "đẹp" với HTML/CSS đơn thuần

Question

Tôi có hai hàng từ trong một div (đầu ra văn bản cơ bản, không có bảng v.v.), ví dụ:

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

Bây giờ, các danh sách đó có thể rất dài và định dạng dễ bị hỏng trên màn hình nhỏ. Nó trông giống như thế này:

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

Nhưng tôi muốn có nó như thế:

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

g h i 
7 8 9 

Làm thế nào tôi có thể đạt được điều này? Tôi muốn sử dụng chức năng HTML thuần túy, không phụ thuộc vào Javascript.

Answer 1

Một vài cách bạn có thể tiếp cận điều này:

1) Sử dụng bảng. Đặt bảng bên trong vùng chứa DIV với thuộc tính CSS overflow-x được đặt thành auto. Điều này sẽ làm cho bảng của bạn có thể cuộn sang trái và phải khi không gian màn hình quá nhỏ.

2) quấn mỗi dòng của div là một container (div, span, vv) và thiết lập thuộc tính white-space CSS của nó để nowrap. Và trên DIV chứa, lại sử dụng thuộc tính CSS overflow-x: auto để làm cho vùng chứa cuộn khi không gian màn hình quá nhỏ.

3) thay vì hai dòng văn bản, đặt từng cặp tên/giá trị trong DIV riêng của nó và làm nổi DIV ở bên trái. Khi kết thúc tốt đẹp nội dung, các cặp sẽ quấn vào dòng tiếp theo:

<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 như thế này:

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

Bạn có thể thực hiện điều này bằng cách sử dụng lớn line-height và tiêu cực margin-bottom đó là bằng gấp đôi 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>