尽可能均匀地分布按钮

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。

我不想拉伸按钮或强制它们的宽度，我想让行保持居中，我不想要基于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);

只要容器长度不增长，它就会收缩容器。

Answer 2

CSS并不包含足够的数学＆＃39; power（跨浏览器）来确定宽度和可用空间。 如果它们具有相似的形状，则使用基于网格的系统（如引导程序和媒体查询）更容易实现。但是因为15＆＃39; G +＆＃39;按钮适合2＆＃39; stackoverflow＆＃39;如果没有确定元素宽度，它将永远不会是您想要的解决方案。

我建议你已经提出了JS解决方案。