From the growth of technology the monitors are becoming wider and wider, and along with them, and blocks of text on websites. It is known that a person is most comfortable to read approximately 67-75 characters per line, but some browsers do not allow time to implement layout in multiple columns by using the built-in functionality. The Technologies are not standing, and more and more browsers are implementing will support multi-column text, which will be discussed in this article.

The demonstration of this process can be found in the text of the article.

multicol ppppppp



As you may have guessed, the column-count property specifies the number of columns and column-gap — the distance between the columns. There are also additional features: column-width, allowing strictly set the width of columns and column-rule, which determines the divider between the columns (for example, 1px dotted #ccc, to separate columns dotted line). In addition, you can use prefixes and -webkit- and -moz- to support older versions of browsers. Thus, you can control columns, simply by changing the numerical values of the properties.

Adaptive multi-column text

What if our website has «rubber» layout and its width can vary, for example, from 320px to 1200px? In this case, we have the support of such a feature CSS, as a «media queries» (allowing to change the css-properties of the different objects, depending on the width of the user’s screen).
Let’s add after the above classes the following snippet:

css 2

This fragment is as follows: if the width of the screen is greater than or equal 1024px, let’s apply the properties contained in the block. In our case, we will overwrite some of the properties class: .three number of columns from the two will increase to three. Ok, it’s for large monitors. Let’s  care of mobile devices — it does not need a column, so let’s go one step further and add a piece of code:

css 3

This code will work when the screen width 480px and less and display all of the text in one column.
Thus, we have the following scheme:

Screen Width <= 480px — one column of text.
Screen width from 480px to 1024px — two columns.
Screen width> = 1024px — three columns.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>