Како поравнати ДИВ хоризонтално у ЦСС-у

Садржај

• Упутства
• Дефинишите апсолутне позиције див ознака
• бок1 {маргин-лефт: 100пк; }
• бок2 {маргин-лефт: 400пк; }
• бок3 {маргин-лефт: 700пк; }
• Плутају ДИВ елементи
• Како
• Обавештење
• Шта ти треба

ХТМЛ "див" ознаке дефинишу изглед веб страница. Каскадни стилски листови се користе за обликовање ХТМЛ ознака унутар страница. Својства "ид" и "цласс" се користе у ЦСС-у за примјену одређених стилова. Ти стилови који су заједнички за више ознака "див" могу бити дефинисани у "класи", али јединствени стилови морају бити дефинисани са својством "ид" за одређену ознаку "див", пошто се ова особина може користити само једном. Сусједни див елемент ће се појавити испод претходног елемента "див", осим ако се не примијени хоризонтални стил поравнања.

Упутства

ХТМЛ "див" ознаке елиминишу потребу за коришћењем табела за изглед странице (Цомстоцк / Цомстоцк / Гетти Имагес)

Дефинишите апсолутне позиције див ознака

1. Отворите ХТМЛ страницу и придружену ЦСС датотеку у два различита прозора из ХТМЛ или основног уређивача текста, као што је Нотепад.

2. Пронађите све див ознаке које ће бити поравнате и креирајте јединствену "халигн" класу:

   Фирст див

   Други див Трећи див

   Ако је "халигн" већ коришћен као име класе на неком другом месту у ХТМЛ-у, употребите други и уверите се да је јединствен.

3. Дајте "ид" имена свим "див" елементима које треба поравнати. Укључите бројеве унутар имена да бисте идентификовали налог за пласман. На пример, употребите имена "бок1", "бок2" и тако даље:

   
   
   Фирст див

   Други див Трећи див

   Запамтите имена "ид" која су већ коришћена.

4. Отворите ЦСС датотеку и унесите следеће:

   .халигн {поситион: абсолуте; на врх: КСКСКС; }

   Замијените "КСКСКС" с вриједношћу маргине између апсолутног врха и хоризонталне линије поравнања. Користите вредности пиксела или проценте, у зависности од других див елемената који се налазе изнад класе "халигн".

5. Уредите појединачне блокове стила "див" у ЦСС-у. Лоцирајте имена "ид" у коду и додајте "лефт: ИИИ" линију кода унутар сваког блока, замењујући "ИИИ" са апсолутним вредностима леве маргине елемената. "Апсолутна маргина" је простор између ивице екрана претраживача и одговарајућег див. Маргине ће имати веће вредности да би се дивови ставили раме уз раме:

   бок1 {маргин-лефт: 100пк; }

   бок2 {маргин-лефт: 400пк; }

   бок3 {маргин-лефт: 700пк; }

Плутају ДИВ елементи

1. Отворите ЦСС датотеку у уређивачу текста.

   
   

2. Дефинишите јединствено "цласс" име, као што је "халигн", унесите "флоат: лефт;" у блок коду и сачувајте датотеку.

3. Отворите ХТМЛ у новом прозору за уређивање текста и уверите се да су сви елементи који се морају поравнати суседни.

4. Повежите име класе "халигн" са суседним "див" елементима које треба поравнати.

5. Ставите следећи код на врх групе "див" у ХТМЛ-у:

Како

• Ако је било које име класе било коришћено у било ком од наведених дивова, унесите додатна имена класа и одвојите их са знаком размака. Користите проценте за граничне вредности и размаке ако веб страница има ширину флуида, тако да се величине блока и граница аутоматски мењају према величини и резолуцији екрана. Елементи дизајна на веб страницама фиксне ширине нису прилагодљиви величини екрана или резолуције, а вриједности пиксела су прикладне за маргине.

Обавештење

• Неки ЦСС кодови производе јединствено понашање у различитим претраживачима. Тестирајте компатибилност свих ЦСС и ХТМЛ кодова. Не тестирање може смањити приступачност и употребљивост веб странице.

Шта ти треба

• Едитор текста