如何使用纯HTML / CSS使“漂亮”表溢出

前端之家收集整理的这篇文章主要介绍了如何使用纯HTML / CSS使“漂亮”表溢出前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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依赖.

解决方法

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

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
原文链接:https://www.f2er.com/html/227125.html

猜你在找的HTML相关文章