html - 尽可能均匀地分布按钮

Question

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

此容器包含可变 数量 的按钮，其大小 不同。

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

See fiddle for HTML and tests .

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

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

我想要的是以尽可能均匀的方式分布按钮(即线条的宽度，当有多个线条时，尽可能相等)。这意味着每行 3 个按钮:

但由于按钮可以有各种大小，因此数字也可以是 2-4，例如。

我不想拉伸(stretch)按钮或强制调整它们的宽度，我想让行居中，我不想要基于 JS 的答案(我已经用 JS 做到了)，我想要一个纯 CSS 解决方案.我知道会是 easy in columns但我看不到行的方法。我也有可能错过了 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);

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