Ідеальне 3-колоночная верстання засобами CSS


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Пропустимо ту частину, де я говорю, що мене звуть Рималь і те, що я захоплююся верстанням дизайну для сайтів, а саме HTML & CSS.

Також пропустимо ту частину, де я розповідаю, що у мене була мрія створити ідеальний шаблон з 100% адаптацією і кроссбраузерностью.

На просторах інтернету я не знайшов нормального пояснення про створення N- колоночных блоків сайту, завжди і скрізь був кривий і негарний код.

Ця стаття більше підійде для новачків у веб-розробці, і я хочу поділитися їм, адже новачки – це свіжі уми, які рано чи пізно замінять старих нудних кодерів.

Наша мета – зробити трехколоночный сайт, блоки якого будуть :

  1. Зменшуватися залежно від розміру екрану (тобто не йтимуть вниз);
  2. Розтягуватися по усій ширині екрану (звичайно це 2-х колоночный сайт);
  3. Адаптуватися при зменшенні заданих розмірів.

Отже, приступимо. Для того, щоб зробити горизонтальні 3 колонки, ми використовуватимемо властивість display: inline – block. Так-так, властивість float вже не так актуально, але воно нам все ж знадобиться.

Перш ніж задати їм властивості, створимо 3 блоки, обернувши їх в класи main і inline:

left
content
right

Далі буде логічне написати стилі для цих класів, що ми і зробимо:

Результат:

Розмір вікна більше 900px

Розмір вікна менше 900px

Іноді треба, щоб дизайн сайту не відразу адаптувався під конкретні розміри, тобто не зникали які-небудь частини сайту, а зберігався увесь функціонал, просто зі зменшенням їх розміру.

Для того, щоб розтягнути дизайн на усю ширину екрану, досить видалити властивість max-width:700px у класі main.

Щоб дизайн повністю не зменшувався при малих розмірах вікна, а адаптувався, додаємо в стилі @media запит:

/* Простий приклад @media запроса*/@media (max-width:600px) { .inline div { display:block; /* Робимо блоки " Блоковими", тобто один під одним */ width:100%; /* Задаємо на усю ширину екрану */ height:100px; }}

Более подробно можно посмотреть на JS Fiddle – приветствуется любое изменение кода в лучшую его сторону.


За материал выражаем благодарность нашему подписчику, Рималю Сафарову.


Однако обратите внимание, что проще всего добиться такого результата средствами CSS Flexbox, о котором мы подробно рассказали в нашей статье.

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *