Как да подравните DIV хоризонтално в CSS

Съдържание

• инструкции
• Определете абсолютните позиции на div таговете
• box1 {margin-left: 100px; }
• box2 {margin-left: 400px; }
• box3 {margin-left: 700px; }
• Потопете DIV елементите
• съвети
• предупредителен
• Какво ви трябва

HTML "div" таговете определят оформлението на уеб страниците. Cascading style sheets се използват за оформяне на HTML тагове в страниците. Свойствата "id" и "class" се използват в CSS за прилагане на определени стилове. Стиловете, които са общи за множество "div" тагове, могат да бъдат дефинирани в "class", но уникалните стилове трябва да бъдат дефинирани с "id" свойството на конкретния "div", тъй като това свойство може да се използва само веднъж. Съседният елемент div ще се появи под предишния елемент "div", освен ако не се приложи хоризонтално подравняващ стил.

инструкции

HTML "div" маркерите премахват необходимостта да се използват таблици за оформление на страници (Comstock / Comstock / Getty Images)

Определете абсолютните позиции на div таговете

1. Отворете HTML страницата и свързания CSS файл в два различни прозореца от HTML или основен текстов редактор, като например Notepad.

2. Намерете всички div тагове, които ще бъдат подравнени и създайте уникален клас "halign":

   Първо разделение

   Втори div div

   Ако "halign" вече е използвано като име на класа на друго място в HTML, използвайте друг и се уверете, че е уникален.

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

   
   
   Първо разделение

   Втори div div

   Обърнете внимание на имената, които вече са били използвани.

4. Отворете CSS файла и въведете следното:

   .align {позиция: абсолютна; отгоре: 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. Определете уникално име "class", като "halign", въведете "float: left;" в кодовия блок и запишете файла.

3. Отворете HTML в нов прозорец на текстов редактор и се уверете, че всички елементи, които трябва да бъдат подравнени, са съседни.

4. Свържете името на класа "halign" със съседни "div" елементи, които трябва да бъдат подравнени.

5. Поставете следния код в горната част на групата елементи „div“ в HTML:

съвети

• Ако някоя от имената на класове е била използвана във всеки от въпросните divs, въведете допълнителни имена на класове и ги разделете със знак за интервал. Използвайте проценти за стойности на полета и интервали, ако уеб страницата има флуидна ширина, така че размерите на блока и границите да се променят автоматично според размера и разделителната способност на екрана. Елементите на дизайна в уеб страниците с фиксирана ширина не могат да се адаптират към размера или резолюцията на екрана, а стойностите на пикселите са подходящи за полетата.

предупредителен

• Някои CSS кодове създават уникално поведение в различни браузъри. Тествайте съвместимостта на всички CSS и HTML кодове. Това не може да намали достъпността и използваемостта на уеб страницата.

Какво ви трябва

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