从 CSS3 中的属性设置列数

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: integer /* an actual number */

column-count: auto;

column-count: inherit;

column-count: initial;

column-count: unset;

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 中的属性设置列数

Set column-count from attribute in CSS3

html

css

client-side