使用 CSS3 完全可以创建如下规则:
.myClass {}
myClass:first-child:nth-last-child(1) {
width: 100%;
}
myClass:first-child:nth-last-child(5) {
width: 20%;
}
因此,根据可能 child 的数量,我需要指定附加规则,这有点棒,甚至可能,但仍然非常麻烦。
所以我想知道是否有一些奇特的通用方法可以做到这一点,可能涉及 css counters
和 calc()
或者喜欢吗?
要澄清:我只是好奇是否有可用的css-only 解决方案。我知道我可以在预处理器甚至 (java)script(s) 的帮助下实现同样的事情。
为了进一步澄清:我不想为每个可能数量的 child 定义规则,而是想创建恰好一个(来统治他们;)),这取决于根据 child 的实际数量相应地定义宽度。
所以,假设:4 个 child -> calc(100%/4)
,n 个 child -> calc(100%/n)
最佳答案
因此,如果我没理解错的话,您真正想要的是让多个元素在同一行上占据相同的宽度,均匀分布?如果是这样,flexbox 可能就是您真正想要的。将容器设置为 display: flex;
然后让子项(在此上下文中为 flex 元素)具有 flex: 0 1 auto;
(即不要超出您的内容,根据需要缩小等)
我设置了一个 CodePen 来展示一个非常基本的例子:http://codepen.io/frippz/pen/bVReYB
关于html - 根据实际数字 n 设置 n-children 样式的通用方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33013011/