Лого www.SiteHere.ru

Текст в несколько столбцов с помощью CSS3

Текст в несколько колонок

Наверняка вы замечали что текст, который печатается в газетах, читать намного легче, чем тот, который на всю ширину экрана. Тем более если экран дюймов 17,а еще хуже если 19. Так вот несколько колонок можно сделать без использования нескольких блоков div, а всего лишь пару строк CSS3.

Браузеры, которые поддерживают данные свойства: Firefox 2+, Chrome 4+, Safari 3.1+ и Opera 11.1.

Пример можно увидеть здесь:

Посмотреть примерСкачать

Создание нескольких колонок

Для того чтобы задать несколько колонок необходимо воспользоваться свойством column-count:

Несколько колонок
1
2
3
4
5
article {
    -webkit-column-count:2;
    -moz-column-count:2;
    column-count:2;
}

Ширина колонки

Для того чтобы задать несколько колонок необязательно использовать вышеприведенное свойство. Это же можно сделать с помощью свойства column-width, которое задает ширину колонки:

Ширина колонки
1
2
3
4
5
article {  
    -moz-column-width: 150px;  
    -webkit-column-width: 150px;   
    column-width: 150px;  
}

Интервал между колонками

Что касается колонок, то присутствует такое свойство, с помощью которого можно задать интервал между колонками. Это свойство column-gap:

Интервал между колонками
1
2
3
4
5
article {     
    -webkit-column-gap: 30px;  
    -moz-column-gap: 30px;  
    column-gap: 30px;  
}

Линии между колонками

И последнее свойство, которое мы рассмотрим, это свойство с помощью которого можно задать границы между колонками:

Границы между колонками
1
2
3
4
5
article {  
    -moz-column-rule: 1px dotted #ccc;  
    -webkit-column-rule: 1px dotted #ccc;  
    column-rule: 1px dotted #ccc;  
}

Вывод

Большие тексты действительно легче читать в несколько колонок, как делают все журналы и газеты. Приятно что появилась такая возможность в CSS3, где можно сделать текст в несколько колонов без использования блоков div с обтеканием.

Успехов!

Источник: http://www.hongkiat.com/blog/css3-multi-columns/

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

5 комментариев к записи
  • тако

    Блин, а куда вставлять этот код? Я как раз 2 день мучаюсь, не могу разделить блок на главной.

     
    • Юрий

      В html необходимо лишь разместить текст в каком-нибудь блоке: div, article, section и т.д. А затем в файле стилей прописать стили к данному блоку. Пример можно скачать по ссылке в начале статьи и посмотреть как там это реализовано.

       
      • тако

        В файле стилей прописал, ничего не поменялось, вставил все в html код, все получилось. Теперь проблема, как сделать каждую колонку независимой?

        Должно быть так: каждая колонка, заголовок, потом картинка, потом текст. А в данном варианте он переносится на следующую колонку.

         
        • Юрий

          CSS3 конечно дал много возможностей, но в вашей ситуации лучше сделать несколько блоков div с обтеканием. И в каждом блоке прописать нужный вам текст с заголовками.

           
          • тако

            спасибо, теперь хоть знаю что искать))

             

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

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