Cột báo trong CSS

Question

Có thể bố trí bố cục cột báo css theo cách sao cho có thể thêm bất kỳ số cột nào và chúng sẽ được liên tục thêm vào bên phải của các cột hiện có.

suy nghĩ của tôi là như thế này: Tôi chỉ cần thêm một div mới và một cột mới sẽ được thêm vào bên phải và như vậy.

Nếu có, làm cách nào?

Here Tôi tìm thấy bố cục báo 4 cột. Nhưng chiều cao cột không giống nhau. Tôi cần một cách để, cho dù văn bản có dài bao lâu, chúng sẽ được quy định theo một chiều cao nhất định.

Có thể trong CSS không?

Answer 1

Tôi nghĩ nhu cầu của bạn được phục vụ tốt nhất bằng cách sử dụng khung CSS hiện tại, thay vì tự viết mã từ đầu, vì nó thực sự phức tạp và khó thực hiện trên tất cả các trình duyệt (vì một số không tuân thủ tiêu chuẩn))

Nhưng dù sao, đối với cột báo, tôi nghĩ có một cái ở đó phù hợp với hóa đơn, 960 Grid System. Nó đi kèm với 12 & 16 cột "lưới", với máng nước và paddings tất cả làm việc ra, và miễn là số cột bạn định sử dụng là một yếu tố 12 hoặc 16, nó có thể xử lý nó.

Answer 2

bạn có thể đặt chiều cao của cột bằng cách sử dụng CSS, nhưng thêm cột tự động là công cụ lập trình bằng các ngôn ngữ lập trình web khác.

Answer 3

Với CSS tinh khiết, rất khó để gán một số div có cùng độ cao trừ khi chiều cao đó là tĩnh. Bạn có thể sử dụng hacks xấu xí nhưng điều đó sẽ chỉ giúp bạn có được cho đến nay.

Đối với các cột thực, hãy sử dụng các bảng, đó là những gì chúng phù hợp. Bảng là cấu trúc HTML hợp lệ, chỉ là bạn không nên sử dụng chúng làm công cụ bố cục chỉ của mình. Nhưng khi các bảng hoạt động, hãy sử dụng các bảng.

Answer 4

CSS3 cung cấp cách chuyển bất kỳ nội dung nào của nút HTML thành bất kỳ số lượng cột nào. Có các thuộc tính để kiểm soát số cột cũng như chiều rộng, chiều cao tương đối ("điền" hoặc cách nội dung được chia cho các cột hiện có), máng xối giữa các cột, "quy tắc" (đường phân chia hoặc đường viền), v.v.

Là điểm xuất phát, hãy xem trang tham chiếu w3schools.com CSS3 Multiple Columns.

Tuy nhiên, như thường lệ, chỉ riêng IE trong số các trình duyệt được sử dụng rộng rãi không hỗ trợ thuộc tính cột-CSS3.

Một giải pháp trình duyệt chéo là Columnizer jQuery Plugin.