html - 如何使用纯 HTML/CSS 使 "pretty"表溢出

Question

我在一个 div 中有两行单词(基本文本输出，还没有表格等)，例如

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。

Answer 1

有几种方法可以解决这个问题:

1) 使用表格。将表格放在容器 DIV 中，并将 overflow-x CSS 属性设置为 auto。当屏幕空间太小时，这将使您的表格可以左右滚动。

2) 将 div 的每一行包裹为一个容器(div、span 等)并设置其 white-space CSS 属性到 nowrap。在包含的 DIV 上，再次使用 CSS 属性 overflow-x: auto 使容器在屏幕空间太小时滚动。

3) 不是两行文本，而是将每个名称/值对放在自己的 DIV 中，并将 DIV float 到左侧。当内容换行时，该对将换行到下一行:

<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