假设我有一个带有属性数据列的flex包装容器,如下所示:
<div class="grid" data-columns="2"></div>
和
.grid {
display:flex;
flex-wrap:wrap;
}
.grid[data-columns=2] > * {
width:50%;
}
.grid[data-columns=3] > * {
width:33.3%;
}
.grid[data-columns=4] > * {
width:25%;
}
这个想法是.grid类元素的子元素的宽度为1 / grid.data-columns。现在我当然可以写一堆它们,但我想知道是否有更动态的方法来做到这一点? css实际上可以从父元素中获取列数并在计算中使用它来确定宽度吗?
答案 0 :(得分:-1)
不要用&#34来理解这一切; css能否实际从父元素中获取列数并在计算中使用它来确定宽度?&#34;,但是如果你得到了,如何用类&#34; grids_child&#34;来说 2 孩子in&#34; grid&#34;你可以做到
.grid_child{width:calc(100% / 2);}
这将使所有元素与&#34; .grid_child&#34;上课,要50%
我没有理解你的问题,但我告诉你这是因为我看到&#34; 1 / .grid&#34;。
一个很好的选择,就像有人告诉你一样使用前处理器
答案 1 :(得分:-1)
正如马克在评论中所说,
CSS3的attr()函数可能有效,但它只能获取所选元素的属性值,而不是父元素。
目前还没有支持CSS3&#39; attr()
的浏览器。因此必须使用LESS和SASS等外部工具来完成。
这是一个用LESS编写的例子:
@max: 10;
.col(@index) when (@index =< @max) { // iterate
.grid[data-columns=@{index}] > * {
width: percentage(1 / @index);
}
.col((@index + 1));
}
.col(@index) when (@index > @max) {} // terminal
.col(1); // kickstart it
,这将被翻译为
.grid[data-columns=1] > * {
width: 100%;
}
.grid[data-columns=2] > * {
width: 50%;
}
.grid[data-columns=3] > * {
width: 33.33333333%;
}
/* ...... */
.grid[data-columns=10] > * {
width: 10%;
}