1

He movido un elemento con position: relative (y las demás variantes); pero cuando muevo el elemento parece que solo se mueve el texto y no el elemento en sí, por lo que cuando quiero adaptar un div como background con max-width: fit-content, se adapta al texto en su posición inicial y el texto que moví se queda afuera del div.

alguien sabrá cómo mover todo el elemento? o alguna solución?

Código HTML:

        <div style="
          background-color:#118a37;
          max-width: fit-content;
          ">
          <div style="
            padding: 20px 20px 20px 20px;
            ">
            <a href="https://i.scdn.co/image/ab67616d0000b27313b3e37318a0c247b550bccd" 
            style="
            height: 100px;
            width: 100px;
            ">
              <img src="https://i.scdn.co/image/ab67616d0000b27313b3e37318a0c247b550bccd" 
              height="100" 
              width="100">
            </a>
            <span style="
            position: relative;
              bottom: 80px;
              left: 115px;
              font-size: 30px;
            ">
              <a style="
                  font-size: 30px;
                  font-weight: bold;
                  max-width: fit-content;
                  "
                  href="https://open.spotify.com/track/34gCuhDGsG4bRPIf9bb02f"
              >Thinking out Loud
                </a>
            </span>
            <div class="data" style="
            position: relative;
              left: 115px;
              bottom: 80px;
            ">
              <span>Ed Sheeran</span>
              <span>2014</span>
              <span>4:41</span> 
            </div>
          </div>
        </div>

imagen por si acaso

El código es de Electron

1 respuesta 1

1

Si entiendo bien la pregunta, lo que se necesita es ajustar el contenido padre, al contenido hijo.

Si el texto es más largo, o si se agrega algo más de contenido, entonces el div padre crece. Esto es lo que entendí.

Para esto cree mi propio .card (div padre) adaptando a la pregunta, usando algunos de tus códigos HTML y CSS.

Cree un contenido padre. Display Flex es para colocar el contenido hijo uno al lado del otro.

Importante: el width: fit-content solamente se le da al contenido padre: en este caso .card.

.card {
 display: flex;
 padding: 20px;
 background-color:#118a37;
 width: fit-content;
}
<div class="card">

</div>

Luego cree dos contenido hijos para que .left este a la derecha y .right a la izquierda. En el hijo .left estara un enlace que contiene una imágen. En el hijo .right estarán todos los contenido: título, enlaces, span, etc.

.left {
 display: inline-flex;
 width: 100px;
 height: 100px;
 margin-right: 10px;
}

.right {
 display: inline-flex;
 flex-wrap: wrap;
 align-items: center; 
 width: auto;
}
<!-- contenido padre -->
<div class="card">
 
 <!-- contenido a la derecha -->
 <div class="left">
  
 </div>
 
 <!-- contenido a la izquierda -->
 <div class="right">
 
 </div>

</div>

Aquí si no se usa flex, es difil responder a la pregunta. Pero se puede. Sin embargo,usando flex es mucho más fácil.

Es más legible y original crear dos archivos aparte: el HTML y la hoja de estilos CSS por separados (actualmente el código de la pregunta es un desastre).

Un ejemplo completo. Espero esta opción te sirva para tu trabajo. Y usa siempre está forma: HTML y CSS por separado.

* {
 box-sizing: border-box
}

body {
 margin: 0;
 padding: 0
}

.card {
 display: flex;
 padding: 20px;
 background-color:#118a37;
 width: fit-content;
}


.left {
 display: inline-flex;
 width: 100px;
 height: 100px;
 margin-right: 10px;
}

.left img {
 display: block;
 width: 100px;
 height: 100px;
}

.right {
 display: inline-flex;
 flex-wrap: wrap;
 align-items: center; 
 width: auto;
}

.right a {
 display: block;
 font-size: 30px;
 font-weight: bold;
 text-decoration: none;
 width: 100%;
}

.data {
 display: block;
 width: 100%;
}
<div class="card">

<div class="left">
 <a href="https://i.scdn.co/image/ab67616d0000b27313b3e37318a0c247b550bccd">
  <img src="https://i.scdn.co/image/ab67616d0000b27313b3e37318a0c247b550bccd">
 </a>
</div> 

<div class="right">
 <a href="https://open.spotify.com/track/34gCuhDGsG4bRPIf9bb02f">Thinking out Loud</a>


<div class="data">
 <span>Ed Sheeran</span>
 <span>2014</span>
 <span>4:41</span> 
 </div>
   
   </div>
   
  </div>

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.