Тази статия демонстрира правилното подравняване на div с практически примери с помощта на CSS.
- Как да подравним надясно Div с помощта на CSS?
- Използване на свойството 'float'.
- Използване на „правилната“ собственост
- Използване на Flex Layout
- Използване на Grid Layout
Как да подравним надясно Div с помощта на CSS?
Програмистът може да подравни всеки div елемент или изображение по начин, който прави уебсайта по-привлекателен. Поради високата си гъвкавост, елементите div могат да се използват по няколко начина на уеб страницата, като дефиниране на секции на страницата, създаване на колони и обвиване на набори от свързано съдържание.
Следвайте методите по-долу, за да подравните div вдясно:
Метод 1: Използване на свойството 'float'.
В HTML файла създайте div и му присвоете клас от „ подравняване надясно ”. Този клас и div се използват в тази статия.
< див клас = 'подравняване надясно' >
< стр > Това е малко съдържание. < / стр >
< / див >
Сега изберете този div клас ' подравняване надясно ” и задайте свойствата на CSS. Тези свойства се използват за по-добра визуализация:
.подравняване надясно {
плаващ: надясно;
подложка: 10px;
заден план- цвят : горещо розово;
}
В горния код „ плавам ” е зададено вдясно. Той плава или премества div в правилната посока на уеб страницата. Свойствата за подложка и цвят на фона са зададени на „ 10px ' и ' горещо розово ” съответно.
След компилиране на горния кодов фрагмент, уеб страницата изглежда така:
Горният резултат потвърждава, че div се движи в правилната посока.
Метод 2: Използване на „правилното“ свойство
В CSS изберете класа div и задайте „ точно ” до 0. Гарантира, че разстоянието на избрания div от дясната страна е равно на нула. След това задайте „ позиция „ собственост на „ абсолютен ”, за да направите позицията на div фиксирана. В крайна сметка приложете някои свойства за стилизиране за по-добра визуализация:
.подравняване надясно{
дясно: 0 ;
позиция: абсолютна;
подложка: 10px;
заден план- цвят : средно лилаво;
}
След изпълнение на кода уеб страницата изглежда така:
Резултатът показва, че div вече е подравнен вдясно.
Метод 3: Използване на Flex Layout
Flex е най-ефективният метод и той поддържа оформлението по време на преоразмеряване на прозореца. Div може да бъде подравнен вдясно с помощта на CSS ' Гъвкаво оформление ' Имоти. Оформлението Flex съдържа много свойства за различни цели.
В HTML файла създайте родителски div и вътре в него създава два братски div. Освен това задайте на всеки div уникален клас:
< див клас = 'подравняване надясно' >< див клас = 'ляво подравнено' >
< стр > Това е нещо повече съдържание .< / стр >
< / див >
< див клас = 'дясно подравнено' >
< h1 >Здравейте от Linuxhint < / h1 >
< / див >
< / див >
Сега вътре в „ <стил> ” добавете следните CSS свойства:
.подравняване надясно {дисплей: гъвкав;
оправдавам- съдържание : интервал между;
}
.дясно подравнено {
подравняване: гъвкав край;
подложка: 10px;
заден план- цвят : средно лилаво;
}
В горния код,
- Присвояване на „ flex ” и стойности „интервал между” към „ дисплей ' и ' justify-content ” имоти, респ. Тези свойства правят div гъвкав и поставят еднакво разстояние между дъщерните div.
- „ самоподравняване ” свойството е зададено на „ гъвкав край ”, което го кара да се подравни към дясната страна на контейнера.
След изпълнение на горния код уеб страницата изглежда така:
Резултатът показва, че div е подравнен вдясно с помощта на гъвкавото оформление.
Метод 4: Използване на Grid Layout
Оформлението на мрежата може също да се използва за дясно подравняване на div. Структурата на HTML кода остава същата:
.подравняване надясно {дисплей: решетка;
grid-template-columns: повторение ( 2 , 1фр ) ;
}
.дясно подравнено {
решетка-колона- започнете : 2 ;
подложка: 10px;
заден план- цвят : сив;
}
Описанието на кода е дадено по-долу:
- Първо изберете родителския клас div „ .подравняване надясно ' и задайте неговия ' дисплей „ собственост на „ решетка ”.
- След това създайте две колони с еднакъв размер, като използвате „ grid-template-colons ' настроен на ' повторение (2, 1fr) ”.
- В крайна сметка изберете дъщерния клас div “ .дясно подравнено ” и задайте „ решетка-колона-начало ” свойство до 2. Това свойство започва елемента от втората колона, т.е. от дясната страна.
След изпълнение на горния код, уеб страницата изглежда така:
Резултатът показва, че div вече е подравнен вдясно с помощта на „ решетка ” свойства на оформлението.
Заключение
За да подравните div в правилната посока, използвайте „ плавам ”, “ точно ”, “ гъвкаво оформление ', и ' мрежово оформление ' Имоти. „ плавам ” свойство се задава отдясно чрез присвояване на стойността 0px ”. За ' flex ”, настройте дисплея да се огъва и използвайте „ самоподравняване „ собственост на „ гъвкав край ”. Използвайки свойството grid, направете две колони с еднакъв размер и накарайте дъщерния div да започва от втората колона.