包裹的多个div在页面上跨越100％宽度，宽度是动态的，并且同样包裹

Question

好吧我觉得这很容易......但我似乎无法绕过它。

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

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

http://jsfiddle.net/ufntosrn/1/

希望这不会变得疯狂......善待我lol

Answer 1

CSS本身不能这样做，因为它具有calc()功能，但它缺乏可以找到元素数量的任何方法，这是任何动态解决方案所必需的。也就是说，如果你可以使用JavaScript设置元素的width，那么这就变得相对简单了：

＆＃13;

＆＃13;

// gets all the <div> elements with the class of 'Navigation':
var navigationElems = document.querySelectorAll('div.Navigation'),
    // determines the percentage (of the appropriate parent element):
    width = 100/navigationElems.length;

// iterates over the array-like navigationElems NodeList, using
// Array.prototype.forEach():
Array.prototype.forEach.call(navigationElems, function (div) {
  // div is the current <div> element, here
  // setting its width to that of the width variable, in percent:
    div.style.width = width + '%';
});

＆＃13;

body {
  margin: 0px;
}
div.Navigation {
  float: left;
  border: 1px solid #333;
  text-align: center;
  /* ensures that the sizing of the element includes
     the padding-, and border-, width: */
  box-sizing: border-box;
}

＆＃13;

<div>
  <div class="Navigation">
    <a href="">Text</a>
  </div>
  <div class="Navigation">
    <a href="">Text</a>
  </div>
  <div class="Navigation">
    <a href="">Text</a>
  </div>
  <div class="Navigation">
    <a href="">Text Long</a>
  </div>
  <div class="Navigation">
    <a href="">Text Longer</a>
  </div>
  <div class="Navigation">
    <a href="">Text Really Long</a>
  </div>
  <div class="Navigation">
    <a href="">1</a>
  </div>
  <div class="Navigation">
    <a href="">Text</a>
  </div>
  <div class="Navigation">
    <a href="">Text</a>
  </div>
  <div class="Navigation">
    <a href="">Text</a>
  </div>
  <div class="Navigation">
    <a href="">Text</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

参考文献：

• CSS：
  • calc() ^{compatibility}
• JavaScript的：
  • Array.prototype.forEach()。
  • document.querySelectorAll()。
  • Function.prototype.call()。
  • HTMLElement.style。