В продолжение своего топика предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.
Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div"ов. Но все может стать намного проще с CSS3 Multi Column Module.
Разбиваем текст на две колонки:
Article { -webkit-column-count:2; -moz-column-count:2; column-count:2; }
При помощи свойства column-width можно задать колонкам необходимую ширину:
Article { -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; }
Article { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; }
Article { -moz-column-rule: 1px dotted #ccc; -webkit-column-rule: 1px dotted #ccc; column-rule: 1px dotted #ccc; }
Article h1 { -webkit-column-span: all; column-span:all; }
Исходя из этих требований я однажды нашел для себя очень хороший способ, немного доработал его и добавил ему несколько параметров, чтобы добиться гибкости при верстке адаптивных страниц. Использую его долго, и сегодня я поделюсь ним с Вами, возможно кому-то он пригодится. И так приступим к верстке трехколоночного сайта!
Первым делом нам надо разобрать структуру, как все будет на нашем сайте. Для начала я покажу сам код, а уже после разберем, что и как. Ниже пример, также попробуйте менять размер окна, чтобы увидеть как себя ведет структура.
Сам HTML код структуры:
По коду видно, что шапка и подвал не зависимы. То есть они не заключены в какие-то контейнеры, то-есть если у вас сайт будет иметь определенную ширину, то шапку и подвал нужно отдельно центрировать, дабы они не съехали. Забегу наперед, в моем примере контент будет шириной 1170пикселей и поэтому я в стилях подвалу и шапке задам эту же ширину и выровняю по центру.
Сам контент вместе с сайдбарами, заключен в общий контейнер, который имеет айди - wrapper . Далее контент, который располагается по центру и имеет айди - content , заключается в еще один контейнер с айди - main . Это обязательно, чтобы в будущем получилась адаптивность.
После контента рядом располагаются два сайдбара - левый с айди - left_side и правый с айди - right_side .
Чтобы все правильно отображалось, нужно добавить стили CSS:
Header{ max-width:1170px; margin:0 auto; } footer{ max-width:1170px; margin:10px auto 0; clear:both; } #wrapper{ max-width:1170px; margin: 0 auto; position:relative; height:100%; } #main{ float:left; width:100%; } #left_side{ width:240px; margin-left:-100%; float:left; } #content{ margin:0 440px 0 250px; } #right_side{ float:left; width:430px; margin-left:-430px; }
Как и говорил, подвал и шапка отдельно и у них своя центрация. Основная ширина всего сайта будет 1170 пикселей, но вы конечно же можете поменять ее, в зависимости от нужд.
Так же сайдбары имеют фиксированную ширину, а при уменьшении размера окна браузера, уменьшается средняя колонка - контент. Если будете менять ширину сайдбаров, меняйте свойство margin у контента, чтобы задать правильные отступы.
Важным моментом является свойство у подвала - clear:both; . Если его убрать, то подвал подпрыгнет вверх к шапке, а это нам не нужно вообще. Если Вам нужно будет сделать отступ между контентом и подвалом, то можете между ними добавить еще один div-блок и ему прописать свойство clear:both; , а у подвала убрать его и задать отступ. Например:
//Блок
//Стили.clear{clear:both;}Теперь добавим стилей CSS уже для правильного отображения сайдбаров и контента на мобильных устройствах, то есть добавим адаптивности нашей версте.
@media (max-width: 950px){ #left_side{ position:relative; margin:0; width:48%; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } #content{ width:98%; margin:0 auto; position:relative; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } #right_side{ position:relative; float:right; margin:0; width:48%; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease;} } @media(max-width: 500px){ #left_side{width:99%;} #right_side{width:99%;} }У меня указаны параметры для ширины сначала - 950px, потом - 500px.Если Вы будете менять ширину контента или всего контейнера, то можете поменять значения на свои, не забывайте про это и просчитывайте правильно, чтобы потом не возникло проблем.
В принципе тут все просто, а основной объем занимает свойство transition. Сделано это для плавной анимации при смене размера окна. Если Вам это не нужно то можете удалить его полностью со всех айди.
Поняв суть того, как это работает, Вы с легкостью будете верстать адаптивные страницы с тремя колонками, которые имеют два сайдбара с контентом посредине.
На этом все, спасибо за внимание. 🙂
1. ширина всех ячеек задана в процентах;
2. сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других - в пикселах.
В первом случае вначале устанавливается ширина всей таблицы в процентах, а затем ширина отдельных ячеек (пример 4.22). Причём в сумме ширина ячеек должна получиться 100%, несмотря на то, что размер таблицы может быть иным. Дело в том, что ширина таблицы вычисляется относительно доступного пространства веб-страницы, а размер ячеек устанавливается относительно всей таблицы в целом.
Пример 4.22. Ширина колонок в процентах XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6