danh sách thứ tự hai dòng chảy cột

Question

ai biết kỹ thuật tốt nhất là chỉ css để nhận được một ol chảy vào hai cột nếu nó dài hơn chiều cao của container? Số lượng mục trong danh sách có thể thay đổi và chiều cao của vùng chứa có thể thay đổi.

Khi tôi thử đặt li thành width:50% và float:left, nó sẽ được chia thành hai cột nhưng 2 đi bên cạnh 1 thay vì bên dưới nó.

những gì tôi muốn đạt được điều này là:

1. abcdef 4. abcdef
2. abcdef 5. abcdef
3. abcdef

Answer 1

này sẽ làm việc cho các trình duyệt hiện đại (tức là không IE) sử dụng các quy tắc column-count và column-gap:

fiddle

ol#two-columns { 
    -moz-column-count: 2; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 20px; 
    column-count: 2; 
    column-gap: 20px; 
} 

Tùy chọn qua trình duyệt sẽ là:

1. xác định hai DIV bên trong CV và nổi chúng sang trái
2. trước tính toán tổng số LI của
3. nếu tổng số vượt quá dung lượng của một DIV, đặt phần còn lại trong DIV thứ hai