Hàng động, Bảng-ish của các mục danh sách bằng cách sử dụng CSS và jQuery

Question

Tôi có một danh sách các mục nội dung, mỗi mục có chiều rộng được đặt nhưng có chiều cao khác nhau (biến). Mỗi mục trong danh sách sẽ được thả nổi bên trái. HTML và CSS như sau:

<style type="text/css"> 
    li{ 
    float: left; 
    width: 200px; 
    } 
    li img{ 
    float: right; 
    } 
</style> 

<ul> 
    <li><h3>Item One</h3> 
     <img src="one.png"> 
     <p>First item content here</p> 
    </li> 
    <li><h3>Item Two</h3> 
     <img src="two.png"> 
     <p>Second item content here</p> 
    </li> 
    <li><h3>Item Three</h3> 
     <img src="three.png"> 
     <p>Third item content here</p> 
    </li> 
    <li><h3>Item Four</h3> 
     <img src="four.png"> 
     <p>Fourth item content here</p> 
    </li> 
    <li><h3>Item Five</h3> 
     <img src="five.png"> 
     <p>Fifth item content here</p> 
    </li> 
</ul> 
</style> 

Vấn đề tôi phải làm với cách các mục nổi nếu có đủ không gian trong hàng cho 3 mục và mục thứ hai cao hơn mục thứ tư . Mục thứ tư sẽ không bắt đầu một dòng mới nhưng thay vào đó sẽ đặt ở bên phải của mục thứ hai như thế này:

Những gì tôi muốn là để xem danh sách-mục để tạo thành một loại bảng giống như cấu trúc sẽ căn chỉnh mỗi hàng độc đáo sau hàng trước đó ở độ cao bằng với mặt hàng cao nhất của hàng trước đó. Thay vì những gì tôi có ở trên, tôi muốn nó trông như thế này:

Tôi cũng muốn để có thể mở rộng độ rộng của div chứa như vậy mà mặt hàng mỗi hàng điều chỉnh khi cần thiết . Ví dụ: nếu div chứa được tạo rộng hơn (ví dụ: nếu người dùng thay đổi kích thước cửa sổ), số lượng mục trên mỗi hàng tăng để lấp đầy khoảng trống. Dưới đây là một ví dụ về các vấn đề liên quan trên một container rộng hơn:

Và đây là những gì tôi muốn nó phải làm:

Dựa trên một câu hỏi trước, tôi don' Tôi nghĩ rằng có một giải pháp dễ dàng cho điều này vì vậy tôi muốn sử dụng jQuery để hoàn thành nó.

Những gì tôi đang suy nghĩ đang sử dụng jQuery để làm điều gì đó như:

Bước 1. Thiết lập độ rộng của từng yếu tố để elementWidth

var elementWidth = 200; // 200px 

Bước 2. Đặt một biến containerWidth chiều rộng của vùng chứa tổng thể

var containerWidth = $('#container').width(); 

Bước 3. Chia containerWidth bởi elementWidth để xác định số phần tử mỗi hàng

var elementsPerRow = containerWidth/elementWidth; 

Bước 4. Thêm bất động sản rõ ràng: left; mỗi elementsPerRow mục danh sách -ith

for(x = 0, x < (total number of all elements), x + elementsPerRow){ 
    // set clear:left to this <li> 
} 

Tôi không phải là rất tốt (người mới bắt đầu hoàn thiện) với JavaScript và jQuery. Ai đó có thể giúp tôi đặt điều này lại với nhau thành một đoạn mã hay mà tôi có thể sao chép và dán (và học hỏi từ).

Cảm ơn bạn!

Answer 1

Vấn đề là bạn đang cố gắng sử dụng float: left khi bạn nên sử dụng display: inline-block. Không cần sử dụng javascript.

li { 
    vertical-align: top; 
    display: inline-block; } 

Xem: http://jsfiddle.net/Wexcode/zgNkA/