css - 如何在css中将父宽度平均分配给它的 child

标签 css

我想要父 div 中的一些 div,我希望它们 float 。我希望将所有父空间分配给它的子空间,并在最后创建空缺口。

child 的数量由父宽度决定,所以我不能使用百分比。

例子:

我想将子 div 宽度设置为 300,父宽度为 1000,所以 1000/300 = 3 个 div 将适合但我希望额外的 100 像素在 child 之间平分。现在,如果我将父级宽度设置为 1200,四个子级应该适合父级。

我需要这样的东西

宽度:计算(100%/(100%/300)); --> child 宽度

但实际上如果第一个除法是浮点除法,第二个除法 为整数除法。但是 css calc 中没有整数除法或 mod 运算符 方法。

任何意见...

最佳答案

如果你只想使用 CSS,你可以用这种代码处理多种不同的情况(最初的想法:http://andr3.net/blog/post/142)——这里的 div 代表你的 child :

/* one item */
div:nth-child(1):nth-last-child(1) {
    width: 100%;
}

/* two items */
div:nth-child(1):nth-last-child(2),
div:nth-child(2):nth-last-child(1) {
    width: 50%;
}

/* three items */
div:nth-child(1):nth-last-child(3),
div:nth-child(2):nth-last-child(2),
div:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

或者使用 flexbox:http://css-tricks.com/snippets/css/a-guide-to-flexbox/

关于css - 如何在css中将父宽度平均分配给它的 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27800471/

相关文章:

javascript - 如何根据需要显示<c:foreach>循环的更多/更少结果?

css - 推特 Bootstrap : safe to use pseudo classes?

html - 使用CSS在图像上定位文本

css - 垂直对齐中间不起作用

关于 em 的 CSS 问题?

css - 列表中绝对定位元素旁边的 float 对齐问题

css - 为什么当我尝试使用 css 时不显示任何图像?

html - 如何在父级容器框中使用 css3 进行模糊处理?

html - 为什么文本悬停在我的 asp.net 元素上不起​​作用?

html - 我试图将导航栏中的链接向右移动 160 像素,但我做不到