Как прижать элемент к правому краю css
Ответы
Вячеслав Межуревский
03 октября 2022
Простейший вариант для манипуляции одного блока относительно другого решается с помощью позиционирования. Исходный HTML файл:
<body>
<div class="wrapper">
<div class="content">i am a wrapper
<div class="inside">i am inside</div>
</div>
</div>
</body>
Допустим необходимо блок с классом inside разместить в нижней части относительно блока с классом content:
.wrapper {
/* Отцентрируем блоки для экспериментов и зададим им ширину*/
margin: 100px auto;
width: 300px;
}
.content {
background-color: #38d9a9;
height: 200px;
position: relative;
}
.inside {
/* абсолютное позиционирование */
position: absolute;
/* прижимаем блок к правой границе относительно блока с position: relative*/
right: 0;
/* Для примера можем прижать блок и к нижней границе */
bottom: 0;
/* задаем ширину и цвет бэкграунда для наглядности*/
width: 75px;
height: 75px;
background-color: #444;
}
0
0
