HTML & CSS: Bố cục lưu lượng dọc (kiểu cột), cách triển khai?

Question

Định vị CSS/html chuẩn của các phần tử "đang chảy" nằm ngang (hàng dựa) =>float:left ;. Tôi cần phải làm gì, để định vị chúng như trong ví dụ bên dưới (kiểu cột). Có thẻ CSS nào để đặt cái này ở đâu đó không? (Lý tưởng nhất là tôi không muốn thiết lập một mạng lưới, điều này sẽ xảy ra theo cùng một cách tự động lilke nó trong float: phong cách trái ...)

+---------------------------+ 
| DivBox1     | 
| DivBox2     | 
| DivBox3     | 
+---------------------------+ 

Sau khi thêm: thêm 2 hộp:

+----------------------------+ 
| DivBox1 DivBox4   | 
| DivBox2 DivBox5   | 
| DivBox3     | 
+----------------------------+ 

Cuối cùng, sau khi bổ sung thêm 2 hộp nó sẽ trông như thế này:

+-----------------------------+ 
| DivBox1 DivBox4 DivBox7 | 
| DivBox2 DivBox5   | 
| DivBox3 DivBox6   | 
+-----------------------------+ 

Answer 1

Có CSS3 Columns (đối với hiệu ứng bạn nói về, phần Height Balancing là một điều tốt để đọc) được hỗ trợ trong các trình duyệt mới hơn và sẽ giống như

Và sẽ hỗ trợ IE 10, FF, and Chrome.

Hoặc, bạn có thể sử dụng công cụ như Masonry.js để nhận cột như hiệu ứng trên trang (mặc dù điều này yêu cầu JS hoạt động) và hỗ trợ nhiều trình duyệt hơn.

Answer 2

thêm một lớp cho mỗi divs và phong cách nó với một cái gì đó như:

0.123.

.myDiv 
{ 
    width: 33%; 
    float: left; 
} 

Answer 3

Ngày nay, sự cố được mô tả có thể được giải quyết một cách linh hoạt hơn bằng cách sử dụng bố cục Flexbox. Yêu cầu trình duyệt mới nhất và lớn nhất (IE 11+).

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#column

http://philipwalton.github.io/solved-by-flexbox/