创建等宽div'；使用CSS的s

我有一个具有一定宽度的div，在此

父div中，我想放置一个或多个“子”div。我希望它们彼此相邻（因此我使用的是
float:left
或
display:inline block
），并且我希望它们都具有相同的宽度。我非常希望它们用一个特定的最大宽度填充父div（因此，如果我有4个div，它们的宽度应该是25%，如果是5个20%，等等）。这里的关键是，无论div的数量是多少，它都应该工作——可以是1，可以是5，可以是15

我在下面的JSFIDLE中尝试过这样做，但是我不知道如何在没有任何JavaScript的情况下让它工作

我想我的问题是div通常会扩展到其内容的宽度，我希望它们扩展到适合父级的位置？我可以尝试在所有子div上使用width:100%，但这似乎与
float:left
或
display:inline block
的效果不太好，那么：

边框增加宽度，溢出：隐藏位将清除浮动，使容器不会折叠
可能将其作为
表
，并将所有元素作为
td
添加到一个
tr
中。如果您想要一个jQuery解决方案

编辑

这是我能想到的使用纯CSS的唯一方法，不确定是否还有其他方法

另外，请检查中已经存在的问题，这样听起来，通过使用表格最容易实现这一点（尽管在这些无表格的时代，这是一个脏话）。由于不知道这些元素的用途，我不知道这在语义上是否正确

你也可以尝试使用display:table cell等，但这与旧浏览器不太兼容…
我只是想说一下-你最好还是使用gasp TABLES（哦，不，他说了什么！aaaaaaah！）


编辑：My fiddle用两个列数不同的表格版本显示您的损坏的div版本。
可能使用
display:table会有帮助吗
 最好的选择是在父div中显示：flex
，在子div中使用
flex-basis:100%


.flex容器{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
边缘顶部：10px；
}
.弹性项目{
-ms flex首选尺寸：100%；
弹性基准：100%；
背景：番茄；
填充物：5px；
高度：150像素；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
边框：1px实心#333；
框大小：边框框；
}

1.
2.
1.
2.
3.
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
6.
7.
8.
div的数量是否会改变？或者父div的宽度是动态的？是的，div的数量将会改变。父级的宽度是固定的。div的数量将如何变化？javascript会添加和删除它们吗？还是在生成页面时生成（并随后固定数量）？两者都有。创建页面时，我可能有3个、5个或10个div。随后，可能会使用JavaScript添加更多内容。但我会满足于一个只适用于任意数量div的解决方案（因此，使用JavaScript添加更多div并不是世界末日）。为此，您需要在页面上显示的实际内容是什么？但如果我只有3个div，它们根本不会填充父级div？这是固定宽度，但所需的id动态宽度是一致的，表非常适合这种行为。用javascript添加额外的
元素也不会破坏解决方案。是的，这似乎是一条路要走。我将把这个问题留一点时间，看看是否有人提出了一个非表格答案。