CSS3中是否有column-min-width和column-max-count？ [英] Is there a column-min-width and column-max-count in CSS3?

问题描述

我在查看 http://www.w3.org/TR/css3-multicol / ，但它只允许您指定 column-width 和 column-count 单独或通过列），但没有定义任何种类的方式来指定，例如最小宽度和最大计数。

例如，在 OpenBSD端口类别索引上，有71个类别，通常适用于9em。 / p>

如果我使用 ul {-moz-column-width：9em;} ，那么在89em及以上，至少9列（89em = 9×（9em的列宽）+ 8×（1em的列间隙）），使得每列包含非常少的类别，以及IMHO，使得更难以导航，因为，即使文本将从左到右，你仍然必须从上到下浏览。 （或者有一种方法可以有从左到右列的列表，而不是从上到下？）

如果我改用 -moz-column-count：8; ，那么该网站在较小屏幕上的可用性较低，大约在70em左右。

是否有解决方案？

解决方案

是的，我们可以使用 @media

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

  ul {-moz -  column：9em; } 
 
 @media（min-width：89em）{
 ul {-moz-columns：8; } 
} 
  

I was looking at http://www.w3.org/TR/css3-multicol/, but it only lets you specify column-width and column-count, potentially both (either individually, or through columns), but does not define any kind of way to specify, say, minimum width and maximum count.

For example, on the category index of OpenBSD ports, there are 71 categories, generally fitting in 9em.

If I use ul {-moz-column-width: 9em;}, then at 89em and above, there'd be at least 9 columns (89em = 9 × (column-width of 9em) + 8 × (column-gap of 1em)), making each column contain very few categories, and, IMHO, making it more difficult to navigate, since, even though the text would "look" left-to-right, you'd still have to navigate top-to-bottom. (Or is there a way to have a list of columns going left to right, instead of top-to-bottom?)

If I instead use -moz-column-count: 8;, then the site will be less usable on smaller screens, below about 70em or so.

Is there a solution?

解决方案

Yes, we can use @media queries to specify different rules for different screens.

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

ul { -moz-columns: 9em; }

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

这篇关于CSS3中是否有column-min-width和column-max-count？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！