Css 多个环绕的div，跨越整个页面100%的宽度，在宽度上是动态的，并且同样环绕

好吧，我以为这会很容易。。。但我似乎不能把我的头围绕着它

div.Navigation {
width:9.090909090909091%;
float: left;
border:1px solid #333;
text-align:center;
}

下面是我的JSFIDLE，进一步了解我正在尝试做什么。希望它有意义

---

希望这不会变得疯狂。。。对我好一点lol

CSS本身无法做到这一点，因为尽管它有一个

calc（）

函数，但它缺少任何可以找到元素数量的方法，这是任何动态解决方案所必需的。也就是说，如果可以使用JavaScript设置元素的

宽度

，那么这就相对容易了：

//获取“导航”类的所有元素：
var navigationElems=document.querySelectorAll（'div.Navigation'），
//确定（相应父元素的）百分比：
宽度=100/导航长度；
//使用
//Array.prototype.forEach（）：
Array.prototype.forEach.call（navigationElems，函数（div）{
//div是当前元素，在这里
//将其宽度设置为宽度变量的宽度（以百分比为单位）：
div.style.width=宽度+'%'；
});
正文{
边际：0px；
}
航海处{
浮动：左；
边框：1px实心#333；
文本对齐：居中；
/*确保图元的大小包括
填充和边框宽度：*/
框大小：边框框；
}

JS FIDLE的CSS部分中的大注释应该作为问题包含在您的问题中。因此，如果第2行有1个div，您希望它自己的宽度为100%？第1行中的div都是相同的宽度（是div的最小宽度）？好吧，该死的。。。我只想和十个div一起去。。。这至少会让我在一个点上，我可以击败它从那里。。。因此，如果一个div由于屏幕大小而必须换行，那么其中五个div将换行。而且，让我们说，它必须一直下降到只有四个div能够适应。。。这将使它有两行加上另一行2列。。。因此，我的问题再次出现。哦，痛苦。