webkit开始支持多栏属性。
如:
section {
display: block;
height: 300px;
-webkit-column-width: 200px;
-webkit-column-gap: 50px;
}
我们设定了固定高度,然后分栏,每栏200px宽,每两栏间隔50px。如果内容较多,则可出现横向scrollbar。
然而实际栏宽并非一定是200px,而是会根据横向可用空间平均分配。比如横向空间为650px时,会有2栏。每栏宽300px,加上2栏间的间隔50px正好等于650px。如果横向空间为700px时,就会变成3栏,每栏宽200px,加上3栏间的2个间隔100px,正好等于700px。所以其行为有点类似min-width,即column至少200px宽(除非可用空间小于200px)。
我们也可以不指定column-width而指定column-count,与上述类似,也会根据横向可用空间平均分配。
我们也可同时指定column-width和column-count。当横向空间超过指定栏数n所需的最小宽度时(即column-width * n + column-gap * (n - 1)),会保持column-width不变。而不足时则会退化为与只指定column-width时的效果一致。
【注:Firefox下的行为与此不一致,貌似是直接忽略column-count。】
我们也可设定width。之前描述的各种自伸缩的情形,其实源于used width的变化。若width固定下来,则column-width也就固定下来了。
道理上,最简单和易于理解的方式是,设定width和column-width为相同值。如下:
section {
display: block;
height: 300px;
-webkit-column-width: 200px;
-webkit-column-gap: 50px;
width: 200px;
}
然而较老版本的webkit存在bug,当width小于 2 * column-width + column-gap 时,会变为只有一栏。也就是说,当不足以容纳两栏时,会退化为不存在分栏情况,因此也不会有横向scrollbar,而变成了纵向scrollbar。或者未设overflow:scroll情况下就是文字交叠在一起,这显然是很糟糕的。
如何解决这个问题呢?一种比较容易想到的方式是用脚本来遍历每个元素,然后看看它的scrollHeight是否超出height,如果超过的话,说明一栏是不足以容纳其内容的,就重置其样式,设定width为2栏所需宽度。
然而这个方式显然有很大的缺陷。如果元素的内容变化,或者样式变化(如字体变大变小)就需要将width设回column-width之后重新计算。
如果不用脚本,则width就必须设置为至少2栏宽。虽然一般并没有什么问题,在某些应用场景下会有问题。例如如果要计算该元素有几栏。本来用(scrollWidth + columnGap) / (columnWidth + columnGap) 即可得到。但是对于只需一栏的情况也会返回2。
这个问题困扰了我好一阵子。直到我突然灵光一现:
section {
display: block;
height: 300px;
-webkit-column-width: 200px;
-webkit-column-gap: 50px;
width: 450px;
margin-left: -250px;
}
section::before {
content: '';
display: block;
width: 200px;
height: 300px;
}
这里的要点是,原先问题是,对于一个只需一栏即可容纳的元素,设定2栏宽度实际造成了多了一个空白栏。要消除这个空白栏,此路不通。那么我们就反其道行之。我们不是消除空白栏,而是通过generated content来填充这个空白栏。这样原本只有一栏的内容都至少会占两栏。对于像计算栏数这样的需求,我们就可以按常规方法计算,把结果减去1,就是真正的结果了。
分享到:
相关推荐
Multicolumn ListView in Android
MultiColumn_ComboBox
multicolumn jcombobox demo
ASP.NET AJAX Extender for multicolumn drag and drop。
Labview中多列列表控件的使用例程,对了解多列列表控件用法有一定帮助。
QuickRpt Bug 尾页打印页脚错误修正 Quickreport Bug { ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :: QuickReport 4.0 for Delphi and C++Builder :: :: :: :: QUICKRPT.PAS - MAIN UNIT...
multicolumn - 创建和管理多个并排窗口 添加一名作者版本: 0.1.1 网址: : 使用多个并排窗口时有用的命令。 概述 使用多个并排窗口是利用当今存在的大型高分辨率显示器的好方法。 这个包提供了 Emacs 的“缺失...
此程序是对多列列表框的项名颜色修改和对项名中的字体的颜色修改的一个不错的例子。对于labview初学者来说是一个很好的例子。
LABVIEW 表格嵌入 单选框和多选框
Current version ---------------------------- - Fixed export of hyperlinks to protected PDF [6.3.5] - Fixed AV in the TfrxPreview - Fixed ParagraphGap for ...中文菜单显示异常的解决方法见压缩包里的说明
matlab开发-MultiColumnListbox。多列列表框,包括列的过滤和着色以及单个值的提取
- Improved ToNRowMode and now works with multiColumn data band and subreport with PrintOnParent - Fixed bug in PDF export with transparency in Picture object and KeepAspectRatio property - Fixed ...
一种扩展,可将条目的显示样式更改为多列显示。自动更改1到3列,具体取决于您的浏览器大小。最新更新(14/08/28)-版本1.4.3:微小修复更新(14/08/22)-版本1.4.1-2:微小布局修复-版本1.4:针对无用滑块布局的优化...
获取元素的所有子元素将它们分布在新的浮动“列”元素上隐藏原始响应行为:调整大小时,检查列号是否更改使用范例 if (!Modernizr.csscolumns) { $('.mycolumn-element').multicolumn(); }执照该脚本是根据获得许可...
- Improved ToNRowMode and now works with multiColumn data band and subreport with PrintOnParent - Fixed bug in PDF export with transparency in Picture object and KeepAspectRatio property - Fixed ...
- Improved ToNRowMode and now works with multiColumn data band and subreport with PrintOnParent - Fixed bug in PDF export with transparency in Picture object and KeepAspectRatio property - Fixed ...
- Improved ToNRowMode and now works with multiColumn data band and subreport with PrintOnParent - Fixed bug in PDF export with transparency in Picture object and KeepAspectRatio property - Fixed ...
MTGCCombobox:扁平,多列且具有自动完成功能的.NET Combobox
- Improved ToNRowMode and now works with multiColumn data band and subreport with PrintOnParent - Fixed bug in PDF export with transparency in Picture object and KeepAspectRatio property - Fixed ...
- Improved ToNRowMode and now works with multiColumn data band and subreport with PrintOnParent - Fixed bug in PDF export with transparency in Picture object and KeepAspectRatio property - Fixed ...