css - 多个 div 向下环绕，跨越页面的 100% 宽度，宽度是动态的，并且同样环绕

Question

好吧，我以为这会很容易......但我似乎无法全神贯注。

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

这是我的 jsfiddle，可以进一步了解我正在尝试做的事情。希望它有意义。

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

希望这不会变得疯狂......对我好一点，哈哈

Answer 1

CSS 本身无法做到这一点，因为虽然它有一个 calc() 函数，但它缺乏任何可以找到元素数量的方法，而这对于任何动态解决方案。也就是说，如果您可以使用 JavaScript 设置元素的 width，那么这将变得相对容易:

// 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 + '%';
});

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;
}

<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>

引用资料:

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