我在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