尽可能均匀地分配按钮

Question

我有一个可变宽度容器( div)。

此容器包含一个变量 number按钮，其大小为 vary。

<div class="buttons">
        <button>Reddit</button>
        <button>G+</button>
        <button>Facebook</button>
        <button>Stack Exchange</button>
        <button>Twitter</button>
        <button>Steam</button>
</div>

有关HTML和测试，请参见。

我想要的是，无论容器的宽度如何，按钮的分布都是和谐的(假设它比最宽的按钮更宽)。

现在我有了这个(如果我调整窗口大小)：

​

​

我想要的是以尽可能均匀的方式分配按钮(也就是说，当有多个按钮时，线条的宽度尽可能相等)。在这里，这意味着每行有3个按钮：

​

​

但是，由于按钮可以是不同的大小，数字也可以是2-4，例如。

我不想拉伸按钮或强制它们的宽度，我想保持行的中心，我不想要一个基于JS的答案(我已经在JS中做了)，我想要一个纯CSS解决方案。我知道这将是列易，但我看不出一种处理行的方法。这也可能是我错过了CSS最近的一项进步(我不喜欢旧浏览器，一个不能在IE上工作的答案可能是可以接受的)，这就是为什么我要问，即使现在看起来不可能。

我已经确定这不是一个微不足道的问题，所以不要费心写一个回答说这是不可能的。

Answer 1

正如我告诉过您的，我认为只有CSS才能做到这一点:P

使用一些JS，这是我能想到的最好的解决方案：

http://jsfiddle.net/1fz0djvL/

var buttons = document.querySelector(".buttons");

function distribute(){
    buttons.style.width = "auto";
    var height = buttons.offsetHeight;
    do{
        buttons.style.width = buttons.offsetWidth - 1 + "px";
        if(buttons.scrollWidth > buttons.offsetWidth) break;
    }
    while(buttons.offsetHeight == height);
    buttons.style.width = buttons.offsetWidth + 1 + "px";
}
distribute();
window.addEventListener("resize", distribute);

它缩小容器，只要它不增长的高度。

Answer 2

CSS不包含足够的“数学”能力(跨浏览器)来确定宽度和可用空间。如果它们具有类似的形状，使用基于网格的系统(如引导和媒体查询)将更容易完成。但是，由于15个'G+‘按钮适合2’堆栈溢出‘空间，如果不确定元素宽度，它将永远不是您想要的解决方案。

我建议给出你已经想出的JS解决方案。