CSS - Phần tử nổi "Đảo ngược" - cách giữ chúng ở dưới cùng?

Question

Tôi hiện đang đối mặt với một vấn đề CSS thú vị mà tôi không thể tìm thấy bất kỳ thứ gì có liên quan trên web. Tôi biết nó phải được giải quyết, có lẽ bạn guys crack hạt .. (?)

Vấn đề sau: Tôi cần hiển thị một số biểu tượng ở phía trước của một hình ảnh được đặt ở phía dưới bên trái. Vì số lượng biểu tượng có thể thay đổi, các biểu tượng được thả bên cạnh nhau (tối đa ba biểu tượng mỗi hàng - được xác định bởi các thuộc tính chiều rộng).

Dưới đây là mã của tôi HTML (div chứa các biểu tượng được định vị tuyệt đối trên một hình ảnh):

<div class="labels"> 
<ul> 
    <li><img src="image1.png" /></li> 
    <li><img src="image1.png" /></li> 
    <li><img src="image1.png" /></li> 
    <li><img src="image1.png" /></li> 
    <li><img src="image1.png" /></li> 
</ul> 

Và CSS liên quan:

.labels { position: absolute; bottom: 20px; left: 5px; z-index: 50; } 
.labels ul { display: block; min-height: 20px; overflow: auto; width:210px; } 
.labels ul li { float: left; list-style-type: none; margin: 0 5px 3px 0; } 

Để giúp bạn một bức tranh nó trông như thế nào và mục tiêu là gì tôi đã làm xước nó cho bạn: xem tại đây (Tôi không được phép tải lên hình ảnh ..): link text

Như bạn có thể thấy các biểu tượng được thả nổi bên trái, nhưng rõ ràng là bắt đầu từ trên cùng. Đó không phải là tốt đẹp, bởi vì tôi muốn các loại nổi ngược lại bắt đầu từ phía dưới bên trái, làm đầy chiều rộng của phần tử ul và tiếp tục trôi nổi trên hàng tiếp theo lên.

Bất kỳ ý tưởng nào về cách giải quyết vấn đề này? Bất kỳ sự trợ giúp nào cũng được đánh giá cao!!

Answer 1

Tôi e rằng không có cách CSS tinh khiết nào để thực hiện việc này. Nổi luôn luôn đi từ trên xuống dưới giống như bố cục tài liệu theo nguyên tắc.

Bạn có thể viết một số phương thức trợ giúp để tạo phần đánh dấu này cho bạn. Điền các mục danh sách theo thứ tự đảo ngược khối và chèn một số mục trống. Ngoài ra, hiển thị nhiều danh sách dưới danh sách khác.

Answer 2

Bạn không thể đạt được hiệu ứng này từ CSS chỉ vì nó chống lại các quy tắc nổi.

Những gì bạn có thể làm là chèn trống <li>, hãy gọi nó là 'spacer' sẽ lấp đầy khoảng trống của biểu tượng thứ 3 ở hàng thứ nhất và đẩy nội dung còn lại xuống.

Nếu không - bạn phải chia <ul> thành 2 danh sách và sắp xếp lại mọi thứ.

Answer 3

Hm .. đó là một điều đáng tiếc - nhưng cảm ơn những gợi ý hay và suy nghĩ của bạn về nó.

Tôi sẽ đi và kiểm tra xem tôi có thể xử lý nó với các mục trống không (theo quan điểm của tôi không phải là cách rất đẹp nhất) hoặc danh sách bổ sung mà tôi đặt từng cái một ở đầu mỗi khác . Nhưng điều thứ hai sẽ khó khăn cũng như danh sách cần được định vị hoàn toàn! ..

Cảm ơn các bạn.

Answer 4

display: flex; 
flex-direction: row-reverse; 

Tôi nghĩ điều này sẽ hữu ích.