Question

我试图从HTML属性中读取列数像这样的东西：

div.columns[cols] {
    column-count: attr(cols)
    -webkit-column-count: attr(cols) /* Chrome, Opera, Safari */
    -moz-column-count: attr(cols) /* Firefox */
}

它似乎不起作用，我不知道我是否遗漏了某些东西，或者它只是不能工作。如果是这样，那么拥有比这更好的解决方案会更好：

div.columns[cols="2"] {
    column-count: 2
    -webkit-column-count: 2 /* Chrome, Opera, Safari */
    -moz-column-count: 2 /* Firefox */
}
div.columns[cols="3"] {
    column-count: 3
    -webkit-column-count: 3 /* Chrome, Opera, Safari */
    -moz-column-count: 3 /* Firefox */
}
div.columns[cols="4"] {
    column-count: 4
    -webkit-column-count: 4 /* Chrome, Opera, Safari */
    -moz-column-count: 4 /* Firefox */
}
div.columns[cols="5"] {
    column-count: 5
    -webkit-column-count: 5 /* Chrome, Opera, Safari */
    -moz-column-count: 5 /* Firefox */
}

谢谢;）

Answer 1

不，你不能这样做。

每个MDN允许的选项为：

列数：整数/ *实际数* /

column-count：auto;

列数：继承;

column-count：initial;

列数：未设置;

Answer 2

你实际上可以只看一下语法http://www.w3.org/TR/css3-values/#attr-notation，虽然我没有尝试过，所以我不知道浏览器支持是什么样的。

您需要在html属性上使用数据前缀，例如：

<div class="columns" data-cols="n">content</div>

并确保将第二个参数传递给attr，这样你的css看起来像这样：

div.columns {
column-count: attr(cols integer)
-webkit-column-count: attr(cols integer)
-moz-column-count: attr(cols integer)
}

在CSS3中设置属性的列数

2 个答案: