如何使用纯HTML / CSS使“漂亮”表溢出
发布时间：2020-12-14 16:40:38 所属栏目：资源 来源：网络整理
导读：我在div中有两行单词(基本文本输出,还没有表等),例如 a b c d e f g h i 1 2 3 4 5 6 7 8 9 现在这些列表可能很长,并且格式在小型监视器上很容易破坏.它看起来像这样： a b c d e fg h i1 2 3 4 5 67 8 9 但是我希望这样： a b c d e f1 2 3 4 5 6g h i7 8 9
|
我在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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |