尽可能均匀地分布按钮 [英] Distribute buttons as evenly as possible

问题描述

我有一个变量宽度容器（div）。

此容器包含

 的大小 < div class =buttons> 
< button> Reddit< / button> 
< button> G +< / button> 
< button> Facebook< / button> 
< button>堆叠交换< / button> 
< button> Twitter< / button> 
< button> Steam< / button> 
< / div> 
  

，但我不看到一个行的方式。这也可能是我错过了最近的进步CSS（我不在乎旧的浏览器和答案，在IE上不工作可能是可以接受的）这就是为什么我问，即使它现在似乎不可能。

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

解决方案

正如我所说的，我认为这是CSS不能实现的：P

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

http://jsfiddle.net/1fz0djvL/

  var buttons = document.querySelector （。纽扣）; 
 
 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）; 
  

它会收缩容器，只要它不会增加高度。

I have a variable width container (a div).

This container contains a variable number of buttons whose sizes vary.

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

What I want is to have an harmonious distribution of the buttons whatever the width of the container (assuming it's wider than the widest button).

Right now I have this (if I adjust the window size) :

What I would want is to have the buttons distributed in the most even way possible (that is the widths of the lines, when there is more than one, as equal as possible). Here that would mean 3 buttons per line :

but as buttons can be of various sizes the numbers could also be 2-4 for example.

I don't want to stretch the buttons or force their widths, I want to keep the rows centered, and I don't want a JS based answer (I already did it in JS), I want a pure CSS solution. I know it would be easy in columns but I don't see a way with rows. It's also possible I missed a recent advance in CSS (I don't care for old browsers and an answer which doesn't work on IE might be acceptable) that's why I'm asking even if it doesn't seem possible right now.

I've already determined it's not a trivial problem, so don't bother writing an answer saying it's not possible.

解决方案

As I told you, I think this is not achievable with CSS only (yet) :P

Using some JS, this is the best solution I can think of:

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

It shrinks the container as long it doesn't grow in height.

这篇关于尽可能均匀地分布按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！