Задать вопрос
@mcnamee

Как сделать так чтобы можно было писать на блоке?

Как сделать так чтобы элементы на этот кружок садились, а не разъезжались?
как нужно: 637f47c4979c4786394415.png
как сейчас: 637f47cfaa43d810254582.png
КОД: https://codepen.io/ThisCodeIsSuck/pen/gOKeNaQ
  • Вопрос задан
  • 85 просмотров
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
EPIDEMIASH
@EPIDEMIASH
Человек швейцарский нож
Вариантов масса, как это можно сделать. Зачем у этих блоков absolute?

637f58fae174d053667673.png

ВОт тебе пример:

<div class="box">
  <div class="round">
      <img src="https://domcomputer.ru/wp-content/uploads/2014/10/radeon-hd-7950_520x337.png" />
      <div class="price">35000 Р</div>
  </div>
  <div class="round">
      <img src="https://domcomputer.ru/wp-content/uploads/2014/10/radeon-hd-7950_520x337.png" />
      <div class="price">35000 Р</div>
  </div>
  <div class="round">
      <img src="https://domcomputer.ru/wp-content/uploads/2014/10/radeon-hd-7950_520x337.png" />
      <div class="price">35000 Р</div>
  </div>
  <div class="round">
      <img src="https://domcomputer.ru/wp-content/uploads/2014/10/radeon-hd-7950_520x337.png" />
      <div class="price">35000 Р</div>
  </div>
</div>


body{
	background: #070707;
	margin: 0px;
  color:#fff;
}

.box {
	display: flex;
	justify-content: space-around;
	padding: 100px;
}

.round {
position:relative;
display: flex;
align-items: center;
width: 180px;
height: 180px;
background: linear-gradient(173.98deg, #5465FF -16.91%, #D662FF 180.35%);
border-radius: 130px;
}

.round img {max-width:220px;}

.price {
  border-radius: 25px;
    min-width: 100px;
    padding: 10px 15px;
    bottom: 0;
    position: absolute;
  background: linear-gradient(173.98deg, #5465FF -16.91%, #D662FF 180.35%);}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы