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


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

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

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

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

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

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

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

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

Перш ніж задати їм властивості, створимо три блоки, обернувши їх в класи 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 адреса не оприлюднюватиметься. Обов’язкові поля позначені *