1

Estoy intentando hacer esto:

introducir la descripción de la imagen aquí

básicamente quiero poner 1 icono en cada círculo para editar y borrar y adentro del container pongo una imagen y texto como se ve en la imagen, sé que puede ser algo sencillo, pero no he podido sé que debe ser con un container general que incluya los 2 container hijos, pero cuando lo hago se ve mal y no logra este efecto adjunto código:

   <div
  style="    display: flex;
width: auto;
margin: 14px;
box-shadow: 0 0 16px 8px #b3b3b440;
border-radius: 10px;"
>
  <div>
    <div
      style="
background: #F8F8F8;
border-radius: 10px;
margin: 15px;
"
    >
      <img
        style="
width: 126px;
padding: 15px;
"
    src="https://res.cloudinary.com/dlqmpatgu/image/upload/v1618344092/580b585b2edbce24c47b2695_rxxkem.png"
      />
    </div>
    <div
      style="
margin: 6px;
margin-top: 45px;
">
      <span style="font-size:16px;   font-size: 18px;
     color: #16335e;
    font-weight: 500;">arreglo de flores rojas</span>
      <br/>
      <span
        style="margin-top: 5px;  font-size: 18px;
    color: #16335e;
    font-weight: 500;
    font-size: 18px;"
        >$ 109999 </span>
      <span
        style="margin-left:10px; font-size:14px; font-weight: 
  normal; color:#1FC94F"
        >Envío gratis</span>
      <br/>
      <span style="font-size:14px;  font-size: 18px;
  color: #16335e;
 font-weight: 500;"
        >2 Productos</span>
    </div>
    <div>
      <div>
       logo bonito
      </div>
      <div>
       logo bonito
      </div>
    </div>
  </div>
</div>

he estado con esto 4 días cualquier ayuda es agradecida :)

también adjunto el código base que tenía antes en este solo está el div del container general y allí hago el flex para acomodar la imagen y el texto como en la imagen también mantengo un width automático para que se adapte depende del contenido del texto:

    <div
  style="    display: flex;
   width: auto;
  margin: 14px;
  box-shadow: 0 0 16px 8px #b3b3b440;
  border-radius: 10px;">
  <div
    style="
  background: #F8F8F8;
  border-radius: 10px;
  margin: 15px;">
    <img
      style="
width: 126px;
padding: 15px;"
  src="https://res.cloudinary.com/dlqmpatgu/image/upload/v1618344092/580b585b2edbce24c47b2695_rxxkem.png"
    />
  </div>
  <div
    style="
margin: 6px;
margin-top: 45px;"
  >
    <span style="font-size:16px;  font-size: 18px;
  color: #16335e;
  font-weight: 500;">flores 
  bonitas</span>
    <br/>
    <span
      style="margin-top: 5px;
   font-size: 18px;   font-size: 18px;
   color: #16335e;
   font-weight: 500;"
      >$ 109990</span>
    <span
      style="margin-left:10px; font-size:14px; font-weight: normal; 
  color:#1FC94F"
      >Envío gratis</span>
    <br/>
    <span style="font-size:14px;  font-size: 18px;
   color: #16335e;
   font-weight: 500;"
      >2 Productos</span
    >
  </div>
</div>

2
  • Edité tu pregunta para que pueda ejecutarse el código en el navegador (usando un snippet). Al hacerlo, veo que tu código incluye cosas que no son css y html, es mejor que publiques un ejemplo mínimo verificable.
    – jachguate
    Commented el 18 abr. 2021 a las 19:57
  • Listo realizada gracia por la corrección
    – alejogon
    Commented el 18 abr. 2021 a las 20:32

2 respuestas 2

2

El position absolute lo ubicara arriba del contenedor y el right lo ubicara a la derecha, ya ahi puedes acomodarlo

    <div
  style="    display: flex;
   width: auto;
  margin: 14px;
  box-shadow: 0 0 16px 8px #b3b3b440;
  border-radius: 10px;">
  <div
    style="
  background: #F8F8F8;
  border-radius: 10px;
  margin: 15px;">
<div style="position: absolute;right: 0; top: 0; margin: 25px;background-color: red;color: #f8f8f8;padding: 5px; border-radius: 50%;">
    X
</div>
    <img
      style="
width: 126px;
padding: 15px;"
  src="https://res.cloudinary.com/dlqmpatgu/image/upload/v1618344092/580b585b2edbce24c47b2695_rxxkem.png"
    />
  </div>
  <div
    style="
margin: 6px;
margin-top: 45px;"
  >
    <span style="font-size:16px;  font-size: 18px;
  color: #16335e;
  font-weight: 500;">flores 
  bonitas</span>
    <br/>
    <span
      style="margin-top: 5px;
   font-size: 18px;   font-size: 18px;
   color: #16335e;
   font-weight: 500;"
      >$ 109990</span>
    <span
      style="margin-left:10px; font-size:14px; font-weight: normal; 
  color:#1FC94F"
      >Envío gratis</span>
    <br/>
    <span style="font-size:14px;  font-size: 18px;
   color: #16335e;
   font-weight: 500;"
      >2 Productos</span
    >
  </div>
</div>

1

Lo que puedes probar es poniendole al contenedor principal, position relative y dentro de este poner los dos divs que contendran los iconos, a estos dos ponerles position absolute para ubicarlos donde desees, te dejo mi prueba para que lo repliques.

body {
            margin: 0;
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }

        .card {
            width: 400px;
            height: 250px;
            background-color: #fff;
            border-radius: 30px;
            box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.09);
            position: relative;
        }
        .icons {
            width: 50px;
            height: 50px;
            background-color: #fff;
            position: absolute;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.09);
        }

        .add {
            right: 65px;
            top: -25px;
        }

        .delete {
            right: 0;
            top: -25px;
        }
<body>
  <div class="card">
    holaa
    <div class="icons add">+</div>
    <div class="icons delete">-</div>
  </div>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.