В этой статье показано правильное выравнивание div на практических примерах с использованием CSS.
- Как выровнять Div по правому краю с помощью CSS?
- Использование свойства «плавать»
- Использование «правильного» свойства
- Использование гибкого макета
- Использование макета сетки
Как выровнять Div по правому краю с помощью CSS?
Разработчик может правильно выровнять каждый элемент div или изображение таким образом, чтобы сделать веб-сайт более привлекательным. Благодаря высокой гибкости элементы div можно использовать на веб-странице несколькими способами, например, для определения разделов страницы, создания столбцов и переноса наборов связанного контента.
Следуйте приведенным ниже методам, чтобы выровнять div по правому краю:
Способ 1: использование свойства «плавать»
В HTML-файле создайте div и назначьте ему класс « выравнивание по правому краю ». Этот класс и div используются в этой статье.
< див сорт '=' 'выровнять по правому краю' >
< п > Это какой-то контент. < / п >
< / див >
Теперь выберите этот класс div « выравнивание по правому краю ” и назначьте свойства CSS. Эти свойства используются для лучшей визуализации:
.align-to-right {
поплавок: справа;
отступ: 10 пикселей;
фон- цвет : ярко-розовый;
}
В приведенном выше коде « плавать ” устанавливается справа. Он плавает или перемещает div в правильном направлении на веб-странице. Для свойств padding и background-color установлено значение « 10 пикселей ' и ' ярко-розовый ' соответственно.
После компиляции приведенного выше фрагмента кода веб-страница выглядит так:
Приведенный выше вывод подтверждает, что div движется в правильном направлении.
Способ 2: Использование «правильного» свойства
В CSS выберите класс div и установите « верно ” на 0. Это гарантирует, что расстояние выбранного div от правой стороны равно нулю. Затем установите « позиция «собственность к» абсолютный », чтобы сделать положение div фиксированным. В конце примените некоторые свойства стиля для лучшей визуализации:
.align-to-right{
верно: 0 ;
положение: абсолютное;
отступ: 10 пикселей;
фон- цвет : средне-фиолетовый;
}
После выполнения кода веб-страница выглядит так:
Вывод показывает, что div теперь выровнен по правому краю.
Способ 3: использование гибкого макета
Flex — наиболее эффективный метод, он сохраняет макет при изменении размера окна. Div можно выровнять по правому краю с помощью CSS. Гибкий макет ' характеристики. Макет Flex содержит множество свойств для различных целей.
В файле HTML создайте родительский div, а внутри него создайте два родственных div. Кроме того, назначьте каждому div уникальный класс:
< див сорт '=' 'выровнять по правому краю' >< див сорт '=' 'выровнено по левому краю' >
< п >Это еще кое-что содержание .< / п >
< / див >
< див сорт '=' 'выравнивание по правому краю' >
< h1 >Привет из Linuxhint < / h1 >
< / див >
< / див >
Теперь внутри « <стиль> » добавить следующие свойства CSS:
.align-to-right {дисплей: гибкий;
оправдывать- содержание : пробел между;
}
.выравнивание по правому краю {
выравнивание: flex-end;
отступ: 10 пикселей;
фон- цвет : средне-фиолетовый;
}
В приведенном выше коде
- Назначать ' сгибать ' и 'space-between' значения для ' отображать ' и ' выравнивание содержания свойства соответственно. Эти свойства делают div гибким и устанавливают равные интервалы между дочерними div.
- “ выровнять себя ” установлено значение “ гибкий конец ”, что приводит к выравниванию по правой стороне контейнера.
После выполнения приведенного выше кода веб-страница выглядит так:
Вывод показывает, что div выровнен по правому краю с использованием гибкого макета.
Метод 4: использование макета сетки
Макет сетки также можно использовать для выравнивания div по правому краю. Структура HTML-кода осталась прежней:
.align-to-right {отображение: сетка;
сетка-шаблон-столбцы: повторить ( 2 , 1 фр. ) ;
}
.выравнивание по правому краю {
сетка-столбец- начинать : 2 ;
отступ: 10 пикселей;
фон- цвет : чирок;
}
Описание кода приведено ниже:
- Сначала выберите родительский класс div « .align-to-right ” и установите его “ отображать «собственность к» сетка ».
- Затем создайте два столбца одинакового размера, используя « сетка-шаблон-столбцы ' установлен в ' повтор(2, 1фр) ».
- В конце выберите дочерний класс div « .выравнивание по правому краю ' и установите ' начало столбца сетки ” на 2. Это свойство начинает элемент со второго столбца, т. е. с правой стороны.
После выполнения приведенного выше кода веб-страница выглядит так:
Вывод показывает, что div теперь выровнен по правому краю с помощью « сетка » свойства макета.
Заключение
Чтобы выровнять div в правильном направлении, используйте « плавать », « верно », « гибкий макет ', и ' Макет сетки ' характеристики. “ плавать ' устанавливается вправо, присваивая значение ' 0px ». Для ' сгибаться », установите для дисплея значение flex и используйте параметр « выровнять себя «собственность к» гибкий конец ». Используя свойство сетки, создайте два столбца одинакового размера и начните дочерний элемент div со второго столбца.