Trepachev D.P. 2012-2020

Gửi học sinh: Thầy được nghỉ đến ngày 6/1, trong thời gian nghỉ thầy sẽ trả lời nhiều nhất có thể,
đôi khi tôi có thể biến mất trong vài ngày

Bố cục JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Phân tích cú pháp Hướng dẫn cơ bản Tham khảo HTML Tham khảo CSS Hướng dẫn OOP và MVC Hướng dẫn bằng video Hướng dẫn cơ bản Tham khảo Hướng dẫn bằng video Hướng dẫn cơ bản Hướng dẫn cơ bản Hướng dẫn cơ bản Hướng dẫn của quản trị viên Hướng dẫn dành cho nhà phát triển Hướng dẫn AJAX+PHP

thuộc tính đếm cột

Cú pháp

Bộ chọn ( đếm cột: số | tự động; )

Giá trị

Giá trị mặc định: tự động.

Ví dụ

Trong ví dụ này, văn bản sẽ được chia thành 3 cột(tất nhiên, trong các trình duyệt hỗ trợ nhiều cột, trong các trình duyệt khác sẽ chỉ có văn bản thuần túy trong một cột):

#elem ( số cột: 3; căn chỉnh văn bản: biện minh; )

">

Ví dụ. Giá trị tự động

Trong ví dụ này, chiều rộng của cột-chiều rộng cột được chỉ định trong 150px, và số của chúng số cột có ý nghĩa tự động- chính trình duyệt sẽ chọn số cột cần thiết và khoảng cách giữa chúng:

#elem ( đếm cột: tự động; chiều rộng cột: 150px; căn chỉnh văn bản: biện minh; )

">

Làm cách nào để sắp xếp văn bản trên một trang thành nhiều cột? Và việc này có thể được thực hiện tự động không? Chắc chắn, nhiều người trong số các bạn đang hoặc đã tham gia phát triển web đã gặp phải vấn đề này - và thường gặp phải các giải pháp phức tạp đòi hỏi các kiểu phức tạp hoặc sử dụng các thư viện JavaScript bổ sung (ví dụ: xem plugin Columnizer cho jQuery).

Bố cục nội dung nhiều cột (đừng nhầm với nhiệm vụ bố cục trang nhiều cột chung, gần giống với vấn đề sắp xếp các khối trên lưới) đã xuất hiện trong thế giới tiêu chuẩn web từ lâu và cuối cùng, không chỉ đạt trạng thái Đề xuất của Ứng viên dưới dạng CSS3 Multi module -column Layout tương ứng, mà còn nhận được sự hỗ trợ khá rộng rãi trong các trình duyệt: ở đâu đó có tiền tố (-moz- hoặc -webkit-) và ở đâu đó trong hiện tại (Opera 11.1+) và các phiên bản theo kế hoạch (IE10+) và ngay lập tức không có tiền tố.

Bình luận
Trong trường hợp Internet Explorer 10, điều này tự động có nghĩa là bạn có thể sử dụng CSS3 Multi-column khi phát triển các ứng dụng kiểu Metro cho Windows 8 bằng HTML/CSS/JS.

Với mục đích của bài viết này, tôi sẽ không sử dụng tiền tố trình duyệt để gây nhầm lẫn cho mã, nhưng khi sử dụng thực tế, đừng quên thêm hỗ trợ tiền tố cho Firefox, Safari và Chrome.

Hãy để tôi lưu ý ngay hai chi tiết quan trọng hơn.
Thứ nhất, trong hầu hết các trường hợp, việc sử dụng bố cục nhiều cột cho văn bản có thể được coi là sự phát triển của việc hiển thị nội dung trang web dọc theo lộ trình Nâng cao lũy tiến, trong đó người dùng các trang web hiện đại hơn sẽ nhận được nhiều lợi ích hơn:

Thứ hai, hiển thị nhiều cột rất phù hợp với khả năng của Truy vấn phương tiện (và ý tưởng thiết kế đáp ứng), ví dụ: ở các kích thước màn hình khác nhau, bạn có thể định dạng văn bản theo số cột khác nhau:

Và điều cuối cùng tôi muốn lưu ý trong phần giới thiệu, để không đi sâu vào vấn đề này nữa và chuyển sang các chi tiết kỹ thuật một cách rõ ràng: khi sử dụng bố cục văn bản nhiều cột, người ta phải nhớ rằng sự sắp xếp như vậy cũng giả định trước một thứ tự đọc nhất định (đối với các ngôn ngữ châu Âu, từ trái sang phải). Do đó, điều quan trọng là để di chuyển cái nhìn từ cột này sang cột khác, cần thực hiện càng ít hành động bổ sung càng tốt, đặc biệt là khi cuộn dọc:

Theo nghĩa này, tính chất ngang của các cột được kết hợp tốt hơn với cuộn ngang (như được sử dụng trong nhiều ứng dụng Win8 - ví dụ: điều này được thấy rõ trong ứng dụng USA Today):

Nhìn chung, loa rất tuyệt nhưng đừng quên trải nghiệm người dùng. Và bây giờ vào trận chiến!

Cột

Vì vậy, chúng tôi có văn bản (nội dung) mà chúng tôi muốn đặt trong một số cột. Nơi để bắt đầu?

Để biến một phần tử như vậy thành phần tử nhiều cột, bạn cần đặt một trong các thuộc tính thông qua kiểu CSS: chiều rộng cột hoặc số cột với một ý nghĩa khác ngoài tự động. Ví dụ,
Để chia văn bản thành hai cột, chỉ cần làm điều này:

Bài viết ( số cột: 2; )

Trình duyệt sẽ thực hiện phần còn lại:

Tài sản thay thế - chiều rộng cột— cho phép bạn đặt độ rộng cột tối ưu:

Bài viết ( chiều rộng cột: 150px; )

Trong trường hợp này, trình duyệt tự chia nội dung thành số cột cần thiết để lấp đầy vùng chứa bên ngoài, điều chỉnh cho phù hợp với độ rộng cột được chỉ định. Điểm quan trọng là chiều rộng thực tế có thể khác với chiều rộng được chỉ định lên hoặc xuống: trong hình trên, thanh màu xám rộng chính xác là 150px - và như bạn có thể thấy, nó nhỏ hơn chiều rộng thực của cột.

Hành vi này được xác định bởi đặc tả và cho phép (tự động) linh hoạt hơn khi phát triển đánh dấu đáp ứng:

Ví dụ: nếu bạn có một vùng chứa có chiều rộng 100px và bạn đặt các cột rộng 45px thì trình duyệt sẽ xem xét rằng chỉ có hai cột là vừa và để lấp đầy toàn bộ không gian, nó sẽ tăng kích thước của mỗi cột lên 50px. (Điều này cũng tính đến khoảng cách giữa các cột, sẽ được thảo luận trong phần tiếp theo.)

Theo một nghĩa nào đó, đây có thể được coi là một giải pháp thay thế cho việc sử dụng Truy vấn phương tiện để chỉ định số lượng cột khác nhau tùy thuộc vào kích thước cửa sổ và tự động tính toán độ rộng cột:

@media (min-width:400px) ( bài viết ( cột-count: 2; ) ) @media (min-width:600px) ( bài viết ( cột-count: 3; ) ) ...

Đây là lần thứ hai tôi nói về một giải pháp thay thế - và đây là lý do.

đếm so với chiều rộng

Như đã rõ từ mô tả ở trên, thông số kỹ thuật cung cấp hai cách để đặt số lượng và chiều rộng của cột (nhân tiện, tất cả các cột đều giống nhau!):

• số cột cho phép bạn chỉ định số lượng cột mà bạn muốn chia nội dung, trong khi độ rộng của các cột do trình duyệt xác định, có tính đến không gian có sẵn.
• chiều rộng cột nó xuất phát từ mặt trái: nó cho biết các cột sẽ xấp xỉ bao nhiêu, tuy nhiên, nó để việc tính toán số lượng của chúng theo quyết định của trình duyệt.

Trong hầu hết các trường hợp, bạn sẽ sử dụng cái này hoặc cái kia, hoạt động với số lượng hoặc độ dài tương ứng. Để đơn giản hóa ký hiệu, có một thuộc tính ngắn như vậy cột, đáp ứng định dạng của dữ liệu được chỉ định:

Cột: 12em; /* chiều rộng cột: 12em; số cột: tự động; */ cột: 2; /* chiều rộng cột: tự động; số cột: 2; */ cột: tự động; /* chiều rộng cột: tự động; số cột: tự động; */ cột: auto 12em; /* chiều rộng cột: 12em; số cột: tự động; */ cột: 2 auto; /* chiều rộng cột: tự động; số cột: 2; */

Điều gì xảy ra nếu bạn chỉ định cả số cột và chiều rộng tối ưu? Theo quy định, trong trường hợp này số cột xác định số lượng cột tối đa:

Bài viết (cột: 150px 3; /* chiều rộng cột: 150px; số cột: 3; */ )

Trên thực tế, theo sự phát triển của các tiêu chuẩn web, bao gồm một số bài viết của tôi về CSS3 (xem chẳng hạn), tôi hy vọng bạn sẽ không kém phần hào hứng trước những cơ hội mở ra cho các nhà phát triển web. Các công cụ thích ứng, linh hoạt và mạnh mẽ để quản lý vị trí nội dung đang trở nên gần gũi và dễ tiếp cận hơn. Và việc giải quyết các vấn đề phức tạp ngày càng trở nên dễ dàng hơn.

Tương tác

Bạn có thể tìm hiểu cách hoạt động của CSS3 Multi-column tại ietestdrive.com:

Hãy thử nó, thử nghiệm. Báo cáo lỗi cho nhà phát triển trình duyệt. Và đừng quên suy nghĩ về những gì người dùng trình duyệt cũ hơn (và có vẻ hiện đại nhưng vẫn chưa hoàn toàn tuân thủ tiêu chuẩn) sẽ thấy—ví dụ: bạn có thể sử dụng plugin cho jQuery Columnizer. Ghi nhớ khả năng thích ứng và người xem màn hình lớn và nhỏ.

Làm cách nào để sắp xếp văn bản trên một trang thành nhiều cột? Và việc này có thể được thực hiện tự động không? Chắc chắn, nhiều người trong số các bạn đang hoặc đã tham gia phát triển web đã gặp phải vấn đề này - và thường gặp phải các giải pháp phức tạp đòi hỏi các kiểu phức tạp hoặc sử dụng các thư viện JavaScript bổ sung (ví dụ: xem plugin Columnizer cho jQuery).

Bố cục nội dung nhiều cột (đừng nhầm với nhiệm vụ bố cục trang nhiều cột chung, gần giống với vấn đề sắp xếp các khối trên lưới) đã xuất hiện trong thế giới tiêu chuẩn web từ lâu và cuối cùng, không chỉ đạt trạng thái Đề xuất của Ứng viên dưới dạng CSS3 Multi module -column Layout tương ứng, mà còn nhận được sự hỗ trợ khá rộng rãi trong các trình duyệt: ở đâu đó có tiền tố (-moz- hoặc -webkit-) và ở đâu đó trong hiện tại (Opera 11.1+) và các phiên bản theo kế hoạch (IE10+) và ngay lập tức không có tiền tố.

Bình luận
Trong trường hợp Internet Explorer 10, điều này tự động có nghĩa là bạn có thể sử dụng CSS3 Multi-column khi phát triển các ứng dụng kiểu Metro cho Windows 8 bằng HTML/CSS/JS.

Với mục đích của bài viết này, tôi sẽ không sử dụng tiền tố trình duyệt để gây nhầm lẫn cho mã, nhưng khi sử dụng thực tế, đừng quên thêm hỗ trợ tiền tố cho Firefox, Safari và Chrome.

Hãy để tôi lưu ý ngay hai chi tiết quan trọng hơn.
Thứ nhất, trong hầu hết các trường hợp, việc sử dụng bố cục nhiều cột cho văn bản có thể được coi là sự phát triển của việc hiển thị nội dung trang web dọc theo lộ trình Nâng cao lũy tiến, trong đó người dùng các trang web hiện đại hơn sẽ nhận được nhiều lợi ích hơn:

Thứ hai, hiển thị nhiều cột rất phù hợp với khả năng của Truy vấn phương tiện (và ý tưởng thiết kế đáp ứng), ví dụ: ở các kích thước màn hình khác nhau, bạn có thể định dạng văn bản theo số cột khác nhau:

Và điều cuối cùng tôi muốn lưu ý trong phần giới thiệu, để không đi sâu vào vấn đề này nữa và chuyển sang các chi tiết kỹ thuật một cách rõ ràng: khi sử dụng bố cục văn bản nhiều cột, người ta phải nhớ rằng sự sắp xếp như vậy cũng giả định trước một thứ tự đọc nhất định (đối với các ngôn ngữ châu Âu, từ trái sang phải). Do đó, điều quan trọng là để di chuyển cái nhìn từ cột này sang cột khác, cần thực hiện càng ít hành động bổ sung càng tốt, đặc biệt là khi cuộn dọc:

Theo nghĩa này, tính chất ngang của các cột được kết hợp tốt hơn với cuộn ngang (như được sử dụng trong nhiều ứng dụng Win8 - ví dụ: điều này được thấy rõ trong ứng dụng USA Today):

Nhìn chung, loa rất tuyệt nhưng đừng quên trải nghiệm người dùng. Và bây giờ vào trận chiến!

Cột

Vì vậy, chúng tôi có văn bản (nội dung) mà chúng tôi muốn đặt trong một số cột. Nơi để bắt đầu?

Để biến một phần tử như vậy thành phần tử nhiều cột, bạn cần đặt một trong các thuộc tính thông qua kiểu CSS: chiều rộng cột hoặc số cột với một ý nghĩa khác ngoài tự động. Ví dụ,
Để chia văn bản thành hai cột, chỉ cần làm điều này:

Bài viết ( số cột: 2; )

Trình duyệt sẽ thực hiện phần còn lại:

Tài sản thay thế - chiều rộng cột— cho phép bạn đặt độ rộng cột tối ưu:

Bài viết ( chiều rộng cột: 150px; )

Trong trường hợp này, trình duyệt tự chia nội dung thành số cột cần thiết để lấp đầy vùng chứa bên ngoài, điều chỉnh cho phù hợp với độ rộng cột được chỉ định. Điểm quan trọng là chiều rộng thực tế có thể khác với chiều rộng được chỉ định lên hoặc xuống: trong hình trên, thanh màu xám rộng chính xác là 150px - và như bạn có thể thấy, nó nhỏ hơn chiều rộng thực của cột.

Hành vi này được xác định bởi đặc tả và cho phép (tự động) linh hoạt hơn khi phát triển đánh dấu đáp ứng:

Ví dụ: nếu bạn có một vùng chứa có chiều rộng 100px và bạn đặt các cột rộng 45px thì trình duyệt sẽ xem xét rằng chỉ có hai cột là vừa và để lấp đầy toàn bộ không gian, nó sẽ tăng kích thước của mỗi cột lên 50px. (Điều này cũng tính đến khoảng cách giữa các cột, sẽ được thảo luận trong phần tiếp theo.)

Theo một nghĩa nào đó, đây có thể được coi là một giải pháp thay thế cho việc sử dụng Truy vấn phương tiện để chỉ định số lượng cột khác nhau tùy thuộc vào kích thước cửa sổ và tự động tính toán độ rộng cột:

@media (min-width:400px) ( bài viết ( cột-count: 2; ) ) @media (min-width:600px) ( bài viết ( cột-count: 3; ) ) ...

Đây là lần thứ hai tôi nói về một giải pháp thay thế - và đây là lý do.

đếm so với chiều rộng

Như đã rõ từ mô tả ở trên, thông số kỹ thuật cung cấp hai cách để đặt số lượng và chiều rộng của cột (nhân tiện, tất cả các cột đều giống nhau!):

• số cột cho phép bạn chỉ định số lượng cột mà bạn muốn chia nội dung, trong khi độ rộng của các cột do trình duyệt xác định, có tính đến không gian có sẵn.
• chiều rộng cột nó xuất phát từ mặt trái: nó cho biết các cột sẽ xấp xỉ bao nhiêu, tuy nhiên, nó để việc tính toán số lượng của chúng theo quyết định của trình duyệt.

Trong hầu hết các trường hợp, bạn sẽ sử dụng cái này hoặc cái kia, hoạt động với số lượng hoặc độ dài tương ứng. Để đơn giản hóa ký hiệu, có một thuộc tính ngắn như vậy cột, đáp ứng định dạng của dữ liệu được chỉ định:

Cột: 12em; /* chiều rộng cột: 12em; số cột: tự động; */ cột: 2; /* chiều rộng cột: tự động; số cột: 2; */ cột: tự động; /* chiều rộng cột: tự động; số cột: tự động; */ cột: auto 12em; /* chiều rộng cột: 12em; số cột: tự động; */ cột: 2 auto; /* chiều rộng cột: tự động; số cột: 2; */

Điều gì xảy ra nếu bạn chỉ định cả số cột và chiều rộng tối ưu? Theo quy định, trong trường hợp này số cột xác định số lượng cột tối đa:

Bài viết (cột: 150px 3; /* chiều rộng cột: 150px; số cột: 3; */ )

Trên thực tế, theo sự phát triển của các tiêu chuẩn web, bao gồm một số bài viết của tôi về CSS3 (xem chẳng hạn), tôi hy vọng bạn sẽ không kém phần hào hứng trước những cơ hội mở ra cho các nhà phát triển web. Các công cụ thích ứng, linh hoạt và mạnh mẽ để quản lý vị trí nội dung đang trở nên gần gũi và dễ tiếp cận hơn. Và việc giải quyết các vấn đề phức tạp ngày càng trở nên dễ dàng hơn.

Tương tác

Bạn có thể tìm hiểu cách hoạt động của CSS3 Multi-column tại ietestdrive.com:

Hãy thử nó, thử nghiệm. Báo cáo lỗi cho nhà phát triển trình duyệt. Và đừng quên suy nghĩ về những gì người dùng trình duyệt cũ hơn (và có vẻ hiện đại nhưng vẫn chưa hoàn toàn tuân thủ tiêu chuẩn) sẽ thấy—ví dụ: bạn có thể sử dụng plugin cho jQuery Columnizer. Ghi nhớ khả năng thích ứng và người xem màn hình lớn và nhỏ.

Trong hướng dẫn này, chúng ta sẽ nói về cách sử dụng các thuộc tính CSS3 để xây dựng mẫu nhiều cột. Vì đây là CSS3 nên việc sử dụng các thuộc tính của nó đòi hỏi phải kiểm tra cẩn thận trước.

Sử dụng nhiều cột

Để tạo nhiều cột bạn có thể sử dụng thuộc tính:

• số cột
• chiều rộng cột

Cái đầu tiên đặt số cột chính xác sẽ được xuất ra và cái cuối cùng đặt chiều rộng của mỗi cột. Tất cả các tham số cột khác sẽ được xác định bởi chiều rộng có sẵn.

Chúng tôi sử dụng đánh dấu HTML:

Mã CSS sẽ như thế này:

Div (số cột: 3)

hoặc như thế này:

Div (độ rộng cột: 15em) /* Bạn cũng có thể sử dụng px */

Một bản ghi âm ngắn cũng có sẵn:

Div (cột: 3 20em)

Trong một mục nhập ngắn, bạn có thể đặt cả số lượng cột và chiều rộng của chúng. Tuy nhiên, trên thực tế, như một quy luật, chỉ cần một điều.

Việc xác định các cột bằng thuộc tính đếm cột sẽ phù hợp hơn với các mẫu linh hoạt vì chiều rộng của các cột sẽ điều chỉnh khi chiều rộng của màn hình trình duyệt thay đổi.

Thùng chứa cột

Việc sử dụng thuộc tính số lượng cột hoặc chiều rộng cột sẽ tạo ra một vùng chứa mới giữa phần tử bên ngoài và nội dung. Nó được gọi là vùng chứa cột, mặc dù bạn không thể thay đổi thuộc tính của nó.

Các cột được căn chỉnh thành một hàng. Tất cả các vùng chứa cột liên tiếp sẽ có cùng chiều cao, mặc dù nội dung của chúng có thể khác nhau đáng kể.

Nếu bạn làm cho một phần tử nổi trong vùng chứa cột, nó sẽ bị giới hạn trong vùng chứa cột chứ không phải vùng chứa bên ngoài. Đặt độ rộng của phần tử cột theo % cũng sẽ có tác dụng - chiều rộng sẽ được tính từ chiều rộng của vùng chứa cột chứ không phải vùng chứa bên ngoài.

Dấu cách và dấu phân cách cột

Có rất ít sự kiểm soát đối với loa. Chúng ta có thể đặt khoảng cách giữa các cột bằng thuộc tính khoảng cách cột. Theo mặc định, thuộc tính khoảng cách cột được đặt thành 1em.

Div (khoảng cách cột: 2em)

Bạn cũng có thể đặt dấu phân cách dọc bằng thuộc tính quy tắc cột:

Div (quy tắc cột: đậm đặc #ccc)

Một bản ghi ngắn có thể được biểu diễn bằng 3 thuộc tính hoạt động giống như khi xác định khung của các phần tử:

• chiều rộng quy tắc cột
• kiểu quy tắc cột
• cột-quy tắc-màu

Khoảng cách có chiều cao bằng với vùng chứa cột và dấu phân cách được đặt ở giữa khoảng cách. Khoảng cách và dải phân cách có cùng chiều cao. Nếu một cột không có nội dung thì dấu phân cách giữa cột đó và các cột liền kề sẽ không hiển thị.

Phần đệm và nhịp cột

Bạn có thể sẽ không thường xuyên sử dụng thuộc tính điền cột để chỉ định cách điền các cột. Đây là một cách để cho trình duyệt biết lượng nội dung cần đặt trong mỗi cột.

Bạn có thể sử dụng tự động (mặc định) hoặc cân bằng, điều này sẽ buộc trình duyệt cố gắng điền đều các cột. Trong thực tế, không có nhiều khác biệt giữa kết quả sử dụng các giá trị này.

Khoảng, được đặt bằng thuộc tính cột-span, là cài đặt hữu ích hơn nhiều. Nó cho phép một phần tử HTML trải rộng trên nhiều cột. Trong hình trên, tiêu đề sử dụng chính xác thuộc tính này.

H2 (nhịp cột: tất cả)

Chỉ có hai giá trị có thể có - tất cả (tất cả) hoặc không có gì (không có gì). Bạn sẽ không thể sử dụng 2 trong 3 cột.

Sự gián đoạn của loa

Có ba thuộc tính tương tự có thể được sử dụng để ngắt nội dung trong một cột xung quanh một phần tử.

• Để phần tử - nghỉ trước:
• Trong phần tử - đột nhập vào bên trong: tự động | luôn | tránh | trái | đúng | trang | cột | tránh trang | cột tránh
• Sau phần tử - nghỉ sau: tự động | tránh | tránh trang | cột tránh

Định nghĩa các giá trị được sử dụng:

• tự động— Việc tạo hoặc cấm ngắt trang/cột bị vô hiệu hóa.
• luôn luôn
• tránh xa- Vô hiệu hóa ngắt trang/cột.
• bên trái- Tạo một hoặc hai ngắt trang để trang tiếp theo được định dạng là trang bên trái.
• Phải- Tạo một hoặc hai ngắt trang để trang tiếp theo có định dạng giống như các trang bên phải.s
• trang- Luôn tạo ngắt trang.
• cột- Luôn tạo ngắt cột.
• trang tránh- Tắt ngắt trang.
• cột tránh- Cấm ngắt cột.

Mục đích của tất cả các thuộc tính và giá trị này là đảm bảo rằng nội dung nhất định bắt đầu trong một cột mới.

Nếu hình ảnh hoặc từ liên tục vượt quá chiều rộng cột sẽ bị cắt ở giữa khoảng trống nơi đặt dấu phân cách.

Có thể giới hạn các cột để phần tử có nhiều cột hơn không gian cho đầu ra:

• Việc giới hạn chiều cao của cột có thể dẫn đến việc có thêm nhiều cột thay vì cung cấp đủ không gian cho đầu ra.
• Việc giới hạn kích thước trang có thể khiến các cột bổ sung được chuyển sang trang tiếp theo.
• Việc chỉ định ngắt cột có thể khiến một cột bổ sung xuất hiện bên ngoài khoảng trống đầu ra có sẵn hoặc trên trang tiếp theo.

Phần kết luận

Thuộc tính CSS3 để tạo mẫu nhiều cột có thể là một công cụ tuyệt vời. Nhưng việc sử dụng chúng đòi hỏi phải kiểm tra cẩn thận sự hỗ trợ trong các trình duyệt khác nhau.

Với sự giúp đỡ của họ, bạn có thể thay đổi diện mạo của dự án hiện có mà không cần thay đổi lớn về cấu trúc.

mô-đun cột CSS3 mô tả bố cục nhiều cột cho phép bạn sắp xếp nội dung sao cho nội dung trải rộng trên nhiều vùng chứa dọc, giống như một tờ báo hoặc tạp chí. Cột có thể chứa tiêu đề, văn bản, bảng, hình ảnh và bất kỳ phần tử nội tuyến nào khác.

Mô hình nhiều cột

Hỗ trợ trình duyệt

I E: 10
Bờ rìa: 12
Firefox: 52, 2 - tháng
Trình duyệt Chrome: 50, 4 -webkit-
Cuộc đi săn: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
Safari của iOS: 9, 3.2 -webkit-
Trình duyệt UC cho Android: 11.8
Chrome dành cho Android: 73
Internet Samsung: 5, 4 -webkit-

Bài viết cũ

Ngày 24 tháng 11 năm 2012

15 Thị Trấn Nhỏ Quyến Rũ Nhất Nước Anh

1. Berwick-upon-Tweed

Berwick được thành lập như một khu định cư Anglo-Saxon trong thời Vương quốc Northumbria, được Anh sáp nhập vào thế kỷ thứ 10. Khu vực này trong hơn 400 năm là trung tâm của các cuộc chiến tranh biên giới lịch sử giữa Vương quốc Anh và Scotland, và nhiều lần quyền sở hữu Berwick đã được đổi chủ giữa hai vương quốc. Lần cuối cùng nó được đổi chủ là khi Richard xứ Gloucester chiếm lại nó cho Anh vào năm 1482. Cho đến ngày nay, nhiều người Berwickers vẫn cảm thấy có mối quan hệ thân thiết với Scotland.

Ngày nay Berwick-upon-Tweed được nhiều người ghé thăm vì lịch sử dễ thấy của nó: những bức tường thành thời trung cổ, thành lũy thời Elizabeth, tàn tích lâu đài thế kỷ 13, 'Cầu Cũ' thế kỷ 17, tòa thị chính, doanh trại quân đội đầu tiên của Anh, khách sạn ở cực bắc nước Anh, cùng nhiều nơi khác .

2. lúa mạch đen

Ancient Rye là những con đường rải sỏi và những dãy nhà xiêu vẹo ven biển. Ban đầu là một phần của Liên đoàn Cảng Cinque, năm thị trấn chiến lược quan trọng cho mục đích thương mại và quân sự trong thời trung cổ, ngày nay Rye thực tế là một bảo tàng sống. Lâu đài Rye, thường được gọi là Tháp Ypres, được Henry III xây dựng vào năm 1249 để bảo vệ khỏi các cuộc đột kích thường xuyên của người Pháp; thậm chí còn lâu đời hơn, St. Nhà thờ Mary nhìn ra thị trấn. Rye cũng chỉ cách một trong những bãi biển nổi tiếng nhất nước Anh, Camber Sands, một sân chơi dài hai dặm dành cho những người thích lướt ván diều và những người yêu thích bãi biển.

Hình 1. Ví dụ về bố cục nhiều cột

1. Số lượng và chiều rộng cột

Xác định số lượng và chiều rộng của cột là điều cơ bản khi xây dựng bố cục nhiều cột. Thuộc tính số lượng cột và chiều rộng cột được sử dụng để thiết lập số lượng và chiều rộng của cột.

Thuộc tính thứ ba, cột, là thuộc tính tốc ký đặt chiều rộng và số lượng cột cùng một lúc.

Các yếu tố khác, chẳng hạn như ngắt cột rõ ràng, nội dung và hạn chế về chiều cao, có thể ảnh hưởng đến số lượng và chiều rộng thực tế của cột.

1.1. Độ rộng cột: thuộc tính chiều rộng cột

Thuộc tính chiều rộng cột chỉ định chiều rộng tối thiểu mà mỗi cột sẽ chiếm.

Tài sản không được thừa kế.

Cú pháp

Độ rộng cột: tự động; chiều rộng cột: 100px; chiều rộng cột: 10em; chiều rộng cột: 3,3vw; chiều rộng cột: kế thừa; chiều rộng cột: ban đầu;

1.2. Số cột: thuộc tính đếm cột

Thuộc tính đếm cột mô tả số lượng cột và chiều rộng của chúng sẽ được tính dựa trên chiều rộng của không gian có sẵn. Nếu chiều rộng cột được chỉ định cùng lúc với số lượng cột thì số lượng cột sẽ được coi là số lượng cột tối đa.

Tài sản không được thừa kế.

Cú pháp

Đếm cột: tự động; số cột: 2; số cột: kế thừa; số cột: ban đầu;

1.3. Đặt cột bằng thuộc tính cột đơn

Thuộc tính columns là thuộc tính tốc ký để thiết lập độ rộng cột và số lượng cột. Các giá trị bị bỏ qua được đặt thành giá trị ban đầu của chúng.

Tài sản không được thừa kế.

Cú pháp

Cột: 12em; /* chiều rộng cột: 12em; số cột: auto */ cột: auto 12em; /* chiều rộng cột: 12em; số cột: auto */ cột: 2; /* chiều rộng cột: tự động; số cột: 2 */ cột: 2 auto; /* chiều rộng cột: tự động; số cột: 2 */ cột: auto; /* chiều rộng cột: tự động; số cột: auto */ columns: auto auto; /* chiều rộng cột: tự động; số lượng cột: auto */ cột: kế thừa; cột: ban đầu;

2. Khoảng cách giữa các cột và đường phân cách

Các khoảng trống cột và đường phân chia được đặt giữa các cột trong một vùng chứa nhiều cột. Độ dài của khoảng trắng và dấu phân cách bằng chiều cao của cột. Các khoảng trống trong các cột chiếm không gian, nghĩa là chúng đẩy nội dung ở các cột liền kề ra xa nhau.

Đường phân chia được vẽ ở giữa khoảng trống giữa các cột, không chiếm diện tích. Nghĩa là, sự hiện diện hoặc độ dày của đường phân chia sẽ không thay đổi vị trí của bất kỳ thứ gì khác.

Các đường được vẽ ngay phía trên đường viền của phần tử nhiều cột. Nếu phần tử có vùng có thể cuộn được, các đường phân chia sẽ cuộn dọc theo các cột. Đường phân cách chỉ xuất hiện giữa 2 cột có nội dung.

2.1. Khoảng cách giữa các cột: thuộc tính khoảng cách cột

Thuộc tính khoảng cách cột xác định khoảng cách giữa các cột. Nếu bạn đặt đường phân chia cho các cột bằng thuộc tính quy tắc cột thì đường này sẽ nằm ở giữa khoảng trống và chiều rộng của nó sẽ không thay đổi chiều rộng tổng thể.

Tài sản không được thừa kế.

Cú pháp

Khoảng cách cột: bình thường; khoảng cách cột: 3px; khoảng cách cột: 2,5em; khoảng cách cột: 3%; khoảng cách cột: kế thừa; khoảng cách cột: ban đầu;

2.2. Màu đường phân chia: thuộc tính màu-quy tắc cột

Thuộc tính cột-rule-color chỉ định màu của đường phân chia.

Tài sản không được thừa kế.

Cú pháp

Cột-quy tắc-màu: hồng; cột-quy tắc-màu: #D71C3B; cột-quy tắc-màu: rgb(192, 56, 78); cột-quy tắc-màu: trong suốt; cột-quy tắc-màu: hsla(0, 100%, 50%, 0,6); cột-quy tắc-màu: kế thừa; cột-quy tắc-màu: ban đầu;

2.3. Kiểu đường phân chia: thuộc tính kiểu quy tắc cột

Thuộc tính colum-rule-style thiết lập kiểu đường phân chia.

Tài sản không được thừa kế.

kiểu quy tắc cột
Giá trị:
không có	Giá trị đánh giá là 0 . Giá trị mặc định.
ẩn giấu	Tương tự như với giá trị none , dòng này bị ẩn.
say mê	Hiển thị một đường dưới dạng một tập hợp các dấu chấm vuông.
nét đứt	Hiển thị một dòng dưới dạng một chuỗi dấu gạch ngang.
chất rắn	Dòng thường xuyên.
gấp đôi	Hiển thị đường phân chia dưới dạng hai đường mỏng song song nằm cách nhau một khoảng. Độ rộng của đường phân chia không được chỉ định nhưng tổng các dòng và khoảng cách giữa chúng bằng giá trị chiều rộng quy tắc cột.
rãnh	Hiển thị một đường thể tích được ép vào khung vẽ. Điều này đạt được bằng cách tạo ra bóng có hai màu, một màu đậm hơn và một màu nhạt hơn.
cây rơm	Hiển thị đường phân chia âm lượng, tức là. tác dụng ngược lại với rãnh.
chèn vào	Hiển thị một đường liền nét có màu đậm hơn màu đường được chỉ định.
sự khởi đầu	Hiển thị một đường liền nét với màu được chỉ định bởi thuộc tính màu quy tắc cột.
ban đầu	Đặt giá trị thuộc tính thành giá trị mặc định.
thừa kế	Kế thừa giá trị thuộc tính từ phần tử cha.

Cú pháp

Kiểu quy tắc cột: không có; kiểu quy tắc cột: ẩn; kiểu quy tắc cột: chấm; kiểu quy tắc cột: nét đứt; kiểu quy tắc cột: vững chắc; kiểu quy tắc cột: gấp đôi; kiểu quy tắc cột: rãnh; kiểu quy tắc cột: sườn núi; kiểu quy tắc cột: inet; kiểu quy tắc cột:đầu; kiểu quy tắc cột: kế thừa; kiểu quy tắc cột: ban đầu;

2.4. Độ rộng đường phân chia: thuộc tính chiều rộng quy tắc cột

Thuộc tính colum-rule-width thiết lập độ rộng của đường phân chia. Giá trị âm không được phép. Không hoạt động nếu không có thuộc tính kiểu quy tắc cột.

Tài sản không được thừa kế.

Cú pháp

Cột-quy tắc-chiều rộng: mỏng; cột-quy tắc-chiều rộng: trung bình; chiều rộng quy tắc cột: dày; chiều rộng quy tắc cột: 1px; chiều rộng quy tắc cột: 2,5em; cột-quy tắc-chiều rộng: kế thừa; cột-quy tắc-chiều rộng: ban đầu;

2.5. Tóm tắt nhanh thuộc tính đường chia: thuộc tính quy tắc cột

Thuộc tính quy tắc cột là viết tắt của thuộc tính cột-quy tắc-chiều rộng cột-quy tắc-kiểu cột-quy tắc-màu.

Tài sản không được thừa kế.

Cú pháp

Quy tắc cột: chấm; quy tắc cột: Solid 8px; quy tắc cột: màu xanh đậm; quy tắc cột: màu xanh đậm; quy tắc cột: kế thừa; quy tắc cột: ban đầu;

3. Ngắt cột

Khi nội dung được đặt trong nhiều cột, trình duyệt phải xác định vị trí đặt các ngắt cột. Vấn đề chia nội dung thành các cột cũng tương tự như việc chia nội dung thành các trang. Để giải quyết vấn đề này, ba thuộc tính mới đã được giới thiệu để cho phép mô tả ngắt cột trong cùng thuộc tính với ngắt trang: break-Before , break-after và break-inside .

4. Column span: thuộc tính Column-span

Thuộc tính cột-span cho phép một phần tử trải dài trên nhiều cột. Nó được chỉ định không phải cho khối vùng chứa mà cho một phần tử cụ thể bên trong, chẳng hạn như tiêu đề.

Trong tương lai, có thể chỉ định số lượng cột cần mở rộng, tương tự như thuộc tính colspan có thể áp dụng cho một ô trong bảng, nhưng đặc tả CSS3 chỉ có hai giá trị có thể có: none và all .

Thuộc tính này không hoạt động theo mặc định trong Firefox. Người dùng phải bật tính năng này một cách rõ ràng, bố cục.css.column-span.enabled phải được đặt thành true . Để thay đổi cài đặt trong Firefox, hãy truy cập about:config.

Tài sản không được thừa kế.

Cú pháp

Cột-span: không có; nhịp cột: tất cả; cột-span: kế thừa; cột-span: ban đầu;

5. Điền nội dung vào cột: thuộc tính column-fill

Thuộc tính điền cột kiểm soát cách các cột được lấp đầy nội dung. Có hai chiến lược để điền cột: cột có thể được căn chỉnh theo chiều cao hoặc không. Nếu các cột được căn chỉnh, trình duyệt nên cố gắng giảm thiểu những thay đổi về chiều cao của cột, đồng thời tính đến các ngắt bắt buộc, góa phụ, mồ côi và các thuộc tính khác có thể ảnh hưởng đến chiều cao cột. Nếu các cột không được căn chỉnh, chúng sẽ được điền tuần tự, một số cột có thể được điền một phần hoặc không được điền chút nào.

Tài sản không được thừa kế.

Cú pháp

Điền cột: tự động; điền vào cột: số dư; cột-điền: cân bằng-tất cả; điền cột: kế thừa; điền cột: ban đầu;

6. Tràn

6.1. Tràn bên trong các thùng chứa nhiều cột

Ngoại trừ trường hợp có thể khiến cột bị gãy, nội dung vượt ra ngoài giới hạn của cột sẽ vượt ra ngoài ranh giới của cột đó và không bị cắt bỏ. Điều này áp dụng chủ yếu cho hình ảnh. Để giải quyết vấn đề này, bạn cần đặt các thuộc tính sau cho hình ảnh:

Img ( display: block; /*xóa phần đệm phía dưới bên dưới hình ảnh*/ width: 100%; /*kéo dài hình ảnh ra toàn bộ chiều rộng của khối container*/ )

6.2. Phân trang và tràn bên ngoài vùng chứa nhiều cột

Nội dung và các đường phân chia vượt ra ngoài các cột ở các cạnh của vùng chứa nhiều cột sẽ được cắt bớt theo thuộc tính tràn.

Vùng chứa nhiều cột có thể có nhiều cột hơn số lượng chỗ trống mà nó có, do các ràng buộc về chiều cao cột (chẳng hạn như chiều cao hoặc chiều cao tối đa) và ngắt cột rõ ràng. Trong trường hợp này, các cột bổ sung được tạo theo hướng của hàng, di chuyển đến các trang tiếp theo.