Як вирівняти DIV горизонтально в CSS

Зміст

• Інструкції
• Визначте абсолютні позиції тегів div
• box1 {margin-left: 100px; }
• box2 {margin-left: 400px; }
• box3 {margin-left: 700px; }
• Плаваючі елементи DIV
• Як
• Повідомлення
• Що вам потрібно

Теги HTML "div" визначають макет веб-сторінок. Каскадні таблиці стилів використовуються для стилізації HTML-тегів на сторінках. Властивості "id" і "class" використовуються в CSS для застосування певних стилів. Ті стилі, загальні для декількох тегів "div", можна визначити в "класі", але унікальні стилі повинні бути визначені за допомогою властивості "id" конкретного тегу "div", оскільки це властивість можна використовувати лише один раз. Суміжний елемент div буде відображатися під попереднім елементом "div", якщо не застосовується стиль вирівнювання по горизонталі.

Інструкції

Теги HTML "div" усувають необхідність використання таблиць для компонування сторінки (Comstock / Comstock / Getty Images)

Визначте абсолютні позиції тегів div

1. Відкрийте HTML-сторінку та пов'язаний з нею файл CSS у двох різних вікнах за допомогою HTML або основного текстового редактора, наприклад, Блокнота.

2. Знайдіть всі теги div, які будуть вирівняні, і створіть унікальний клас "halign":

   Перший div

   Другий div Third div

   Якщо "halign" вже використовується як назва класу в іншому місці в HTML, використовуйте інший і переконайтеся, що він унікальний.

3. Дайте іменам "id" всім елементам "div", які потрібно вирівняти. Вкажіть числа в іменах, щоб визначити порядок розташування. Наприклад, використовуйте імена "box1", "box2" тощо:

   
   
   Перший div

   Другий div Third div

   Зверніть увагу на вже використані імена "id".

4. Відкрийте файл CSS і введіть наступне:

   .shign {позиція: абсолютна; top: XXX; }

   Замініть значення "XXX" значенням поля між абсолютним верхом і лінією горизонтального вирівнювання. Використовуйте значення пікселів або відсотки, залежно від інших елементів div, які розміщені над класом "halign".

5. Редагуйте окремі блоки стилів "div" у CSS. Знайдіть в коді імена "id" і додайте коду "left: YYY" всередині кожного блоку, замінивши "YYY" абсолютними значеннями лівих полів елементів. "Абсолютна маржа" - це простір між краєм екрана браузера і відповідним div. Поля матимуть великі значення, щоб розмістити divs поруч:

   box1 {margin-left: 100px; }

   box2 {margin-left: 400px; }

   box3 {margin-left: 700px; }

Плаваючі елементи DIV

1. Відкрийте файл CSS у текстовому редакторі.

   
   

2. Визначте унікальне ім'я "класу", наприклад "halign", введіть "float: left;" в блоці коду і збережіть файл.

3. Відкрийте HTML у новому вікні текстового редактора та переконайтеся, що всі елементи, які потрібно вирівняти, розташовані поруч.

4. З'єднайте ім'я класу "halign" з суміжними елементами "div", які необхідно вирівняти.

5. Помістіть наступний код поверх групи елементів "div" у HTML:

Як

• Якщо будь-які імена класів були використані в будь-якому з розглянутих divs, введіть додаткові імена класів і розділіть їх символом інтервалу. Використовуйте відсотки для значень і пробілів, якщо веб-сторінка має ширину рідини, так що розміри блоків і кордонів автоматично змінюються відповідно до розміру та роздільної здатності екрана. Елементи дизайну у веб-сторінках з фіксованою шириною не пристосовані до розміру екрану або дозволу, а значення пікселів підходять для полів.

Повідомлення

• Деякі CSS-коди створюють унікальну поведінку в різних браузерах. Перевірте сумісність всіх кодів CSS і HTML. Не тестування може зменшити доступність і зручність використання веб-сторінки.

Що вам потрібно

• Текстовий редактор