Điền vào cột - Thủ thuật CSS

Mục lục

Khi bạn thêm chiều cao vào phần tử nhiều cột, bạn có thể kiểm soát cách nội dung lấp đầy các cột. Nội dung có thể được cân bằng hoặc điền tuần tự.

ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )

Thuộc tính này chỉ có sẵn trong Firefox. Firefox sẽ tự động cân bằng nội dung trong một bố cục nhiều cột hạn chế về chiều cao. Các trình duyệt khác sẽ luôn lấp đầy các cột một cách tuần tự khi có giới hạn chiều cao.

Để làm cho Firefox hoạt động giống như các trình duyệt khác, nghĩa là điền vào các cột một cách tuần tự, bạn có thể đặt column-fill: auto.

Giá trị

column-fillchấp nhận các giá trị từ khóa balancevà auto.

balancesẽ lấp đầy mỗi cột với cùng một lượng nội dung, nhưng sẽ không cho phép các cột phát triển cao hơn height. Bạn có thể thấy rằng các cột sẽ ngắn hơn heightvì trình duyệt phân phối nội dung đồng đều theo chiều ngang.

autosẽ điền vào mỗi cột cho đến khi nó đạt đến heightvà làm điều này cho đến khi nó hết nội dung. Với nội dung, giá trị này sẽ không nhất thiết phải lấp đầy tất cả các cột hoặc lấp đầy chúng một cách đồng đều.

Nó giống như đổ nước trái cây vào ly. Bạn có thể đổ một lượng nước trái cây bằng nhau vào mỗi ly và thấy rằng bạn không đổ đầy mỗi ly ( balance). Ngoài ra, bạn có thể đổ đầy ly đến khi đầy và lặp lại điều này cho đến khi không còn nước trái cây. Do đó, các ly còn lại có thể ít hơn hoặc không có nước trái cây ( auto).

Xem ví dụ điền vào cột Bút (CSS-Tricks) bằng CSS-Tricks (@ css-trick) trên CodePen.

Hỗ trợ trình duyệt

Các column-fillgiá trị từ khóa hoạt động cụ thể trong Firefox. Chúng không hoạt động vào tháng 8 năm 2014 khi mục nhập Almanac này ban đầu được viết, nhưng đã hoạt động khi được kiểm tra lại vào tháng 8 năm 2015 (Chrome 44). Trong quá trình thử nghiệm đó, có vẻ như việc thay đổi giá trị động sẽ không thực hiện, bạn phải buộc chuyển tiếp.

Hỗ trợ trình duyệt cho bố cục nhiều cột nói chung: