CSS3中是否有column-min-width和column-max-count?

时间:2015-04-30 16:07:27

标签: html css css3

我正在查看http://www.w3.org/TR/css3-multicol/,但它只允许您指定column-widthcolumn-count,可能两者(单独或通过columns),但不定义任何一种指定最小宽度和最大数量的方法。

例如,在category index of OpenBSD ports上,共有71个类别,通常适用于9em。

如果我使用ul {-moz-column-width: 9em;},那么在89em及以上,至少有9列(89em = 9×(列宽9em)+ 8×(列间隙1em)),使每个列包含很少的类别,并且,恕我直言,使其导航更加困难,因为即使文本从左到右“看起来”,您仍然需要从上到下进行导航。 (或者有没有办法让列从左到右,而不是从上到下?)

如果我改为使用-moz-column-count: 8;,那么该网站在较小的屏幕上将无法使用,低于约70em左右。

有解决方案吗?

1 个答案:

答案 0 :(得分:1)

是的,我们可以使用@media查询为不同的屏幕指定不同的规则。

http://www.w3.org/TR/css3-mediaqueries/

ul { -moz-columns: 9em; }

@media (min-width: 89em) {
  ul { -moz-columns: 8; }
}