rộng Lỏng với DIV cách đều nhau + hàng cuối cùng còn liên kết

Question

Tôi đã cố định hộp rộng trong một bố cục chất lỏng và text-align: justify chúng với giải pháp này được đăng:

Fluid width with equally spaced DIVs

Nhưng kể từ khi tôi có một vài nhiều hàng hơn trong bố cục đáp ứng.

Đây là khóa học sẽ xảy ra:

------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------   ------  ------  
| |   | |  | | 
| |   | |  | | 
------   ------  ------ 

Nhưng tôi muốn có nó như thế này:

------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------ ------ ------ 
| | | | | | 
| | | | | | 
------ ------ ------ 

Dĩ nhiên biện minh làm đó là công việc mà là có một giải pháp này mà không sử dụng javascript để làm cái này?

Tôi nghĩ văn bản được căn chỉnh cuối cùng: bên trái có thể hoạt động, nhưng không và nó vẫn chưa chính thức.

Ý tưởng cho một giải pháp khả thi:

tôi đã đưa ra một giải pháp javascript có thể nhưng tôi cần sự giúp đỡ của bạn cho điều đó.

Dưới đây là ý tưởng của tôi cho một giải pháp khả thi:

Để có được những dòng cuối cùng bên trái thẳng hàng chúng tôi thực sự sẽ cần phải điền vào những khoảng trống thiếu với các hộp vô hình. Chúng ta có thể dễ dàng làm điều đó bằng tay nhưng số lượng div là người dùng được tạo và luôn khác nhau.

Vì vậy, cỏ dại cần phải biết số lượng các hộp đang thiếu và gắn nó vào những người chúng ta đã có, để làm cho nó làm việc:

Vì vậy, đây là của tôi (trẻ con) srcipting ý tưởng:

1. Count all divs 
2. Divide them with 4 (cause we have 4 in a row) 
3. If the SolutionA has no decimal, nothing will happen cause all is good 
4. If the SolutionA has a decimal, remove it 
5. SolutionA + 1 = SolutionB 
6. SolutionB x 4 (cause we have 4 each in a row) = SolutionC 
7. SolutionC - SolutionA = Number of divs we need to add. 

Tôi không biết nếu có cách nào để tìm hiểu có bao nhiêu mục đã được trong một hàng để vượt qua đó để javascript. Điều này sẽ là nguyên nhân tốt sau đó formular sẽ làm việc cho một bố trí đáp ứng mà không cần điều chỉnh số hàng với mỗi lần họ thay đổi với chiều rộng của trình duyệt.

Đây có phải là một ý tưởng hay không?

Tôi hy vọng một số người muốn thực hiện việc này.

Dưới đây là một fiddle để làm việc với: http://jsfiddle.net/L2mPf/

Cảm ơn bạn.

Xem câu trả lời của tôi bên ngoài.

Answer 1

Ok, đây là giải pháp damn dễ dàng với css:

Chỉ cần thêm rất nhiều divs có bao nhiêu liên tiếp sẽ là (trong trường hợp này 4) và cung cấp cho họ một chiều cao 1px.

Không có gì để xem và tất cả các công trình như nét duyên dáng không có javascript.

Đây là fiddle mới: http://jsfiddle.net/L2mPf/1/

Nhờ @GGG để tập trung tôi trở về css và giải pháp này.

Answer 2

Bạn cần chỉ định chiều cao cho các hộp. Trong trường hợp của bạn ngay bây giờ, nội dung của các hộp có thể thay đổi do hộp này không sắp xếp.

Answer 3

trong css của bạn đặt chiều cao tối thiểu cho các hộp của bạn.

.box-class { 
    min-height: 100px; 
    height: auto !important; 
    height: 100px; 
} 

100px là ví dụ và bao gồm một sửa chữa phút chiều cao cho IE6

bạn cũng có thể muốn float trái (và khối hiển thị) hộp của bạn và sau đó clearfix container cha mẹ để giữ cho nó mở nếu sự liên kết vấn đề vẫn tồn tại. (Ví dụ về clearfix css trong liên kết)