多列CSS列表

发布时间:2019-07-11 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了多列CSS列表脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法做可重新流动的多列列表,其中列表可以使用只有有效CSS的不同高度的列表项?通过可重复流动,我的意思是当用户拖动窗口更宽或更窄时,当列表项具有固定宽度时,列数应自动调整.

我在A List Apart上看过这篇文章,但他们的解决方案都不适合所有这些(看似简单的)要求.乍一看,我认为多列列表的CCS3提议也没有(因为看起来你必须指定列数).

如果它有帮助,我完全不关心IE6,只关心IE7.我的目标受众是早期采用者,精通网络的类型.

更新:仔细观察CSS3规范,指定列宽应该这样做,但实际上,我遇到了溢出等问题.有人用这种东西IRL吗?

解决方法

原帖

实际上,单个命令对我有用(虽然它有-webkit-和-moz-版本):

div.wrapper 
{
    -webkit-column-width: 10em;
    -moz-column-width: 10em;
}

以下是提高可读性的其他规则.将下面和上面的代码插入A List Apart文章中的示例(如果有人清除版权,我可以粘贴整个HTML)并享受:

div.wrapper {       
    border: 2px solid blue;
    -webkit-column-rule: 2px solid blue;
    -moz-column-rule: 2px solid blue;
}

.wrapper ol {
    margin: 0;
}

.wrapper br {
    display: none; /* Extra BR is unnecessary there */
}

测试:Safari 4(4528.17),Fx 3.5b4 / Mac.

请注意,在前一次遇到列宽属性时,我完全错过了重新平衡的关键事实.现在在W3C发现它并在Surfin’ Safari确认.

附录:固定列数

正如我从澄清中理解的那样,列的宽度应随页面的宽度而变化,因此命令更像

div.wrapper 
{
    -webkit-column-count: 3;
    -moz-column-count: 3;
}

附录:垂直滚动

现在你说应该有一个垂直滚动条.由于没有用户界面可以在每列的右侧单独设置滚动条,因此我认为您需要一个滚动整个多列列表的滚动条.这可以通过再包装一个div来完成

div.morewrap 
{
     height: 50%; /* whatever you need */
     overflow-y: scroll; 
}

总结

以上是脚本之家为你收集整理的多列CSS列表全部内容,希望文章能够帮你解决多列CSS列表所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

快乐,其实很简单!比如有我~

关注我升职加薪

标签: