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浮动到左侧。当内容换行时，该对将换行到下一行：

<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

Answer 2

您可以使用等于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>

我怎样才能做出漂亮的＆＃34;表格溢出与纯HTML / CSS

2 个答案: