Phân phối các nút càng đồng đều càng tốt

Question

Tôi có một chiều rộng thay đổi vùng chứa (div).

chứa này có chứa một biếnsố các nút mà kích thướckhác nhau.

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

Điều tôi muốn là phân phối hài hòa các nút bất kể chiều rộng của vùng chứa (giả sử nó rộng hơn nút rộng nhất).

Ngay bây giờ tôi có điều này (nếu tôi điều chỉnh kích thước cửa sổ):

Những gì tôi muốn là để có các nút phân bố ở thậm chí cách có thể (có nghĩa là độ rộng của hầu hết dòng, khi có nhiều hơn một, càng bằng nhau càng tốt). Đây đó có nghĩa là 3 nút trên mỗi dòng:

nhưng như nút có thể có kích thước khác nhau những con số cũng có thể là 2-4 cho ví dụ.

Tôi không muốn kéo dài các nút hoặc buộc chiều rộng của chúng, tôi muốn giữ các hàng được căn giữa và tôi không muốn câu trả lời dựa trên JS (tôi đã thực hiện nó trong JS), tôi muốn một CSS thuần túy dung dịch. Tôi biết nó sẽ là easy in columns nhưng tôi không thấy một cách có hàng. Nó cũng có thể tôi bỏ lỡ một tiến bộ gần đây trong CSS (Tôi không quan tâm cho các trình duyệt cũ và một câu trả lời mà không làm việc trên IE có thể chấp nhận được) đó là lý do tại sao tôi hỏi ngay cả khi nó không có vẻ ngay bây giờ.

Tôi đã xác định đây không phải là vấn đề tầm thường, do đó, đừng bận tâm viết câu trả lời cho biết điều đó là không thể.

Answer 1

CSS không có đủ sức mạnh 'toán học' (trình duyệt chéo) để xác định chiều rộng và không gian có sẵn. Nếu chúng được định dạng tương tự, sẽ dễ thực hiện hơn với hệ thống dựa trên lưới như bootstrap và truy vấn phương tiện. Nhưng bởi vì 15 'G +' nút phù hợp với không gian 2 'stackoverflow', nó sẽ không bao giờ là giải pháp bạn muốn mà không cần xác định chiều rộng phần tử.

Tôi khuyên bạn nên đưa ra giải pháp JS mà bạn đã đưa ra.

Answer 2

Như tôi đã nói với bạn, tôi nghĩ rằng đây là không thể đạt được với CSS chỉ (chưa): P

Sử dụng một số JS, đây là giải pháp tốt nhất mà tôi có thể nghĩ đến:

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

Nó thu hẹp vùng chứa khi nó không phát triển chiều cao.