1

estoy empezando a aprender CSS y para practicar me propuse hacer una web para un trabajo de la universidad el problema es que estoy queriendo acomodar un texto al lado de una imagen y no logro que quede bien, este me queda abajo de la misma. ya probé con display inline-block y le puse un width: 30%

adjunto el codigo y una captura de pantalla de como me queda.

CSS

.primer-parrafo{
 display: inline-block;
 width: 30%;
}

HTML

    <div><p class="primer-parafo">Klarens Malluta es un artista Albano autodidacta que se 
    caracteriza por tener un estilo psicodelico y disruptivo. <br>
    gran parte de su trabajo se ve influenciado por internet dado que segun sus propias palabras 
   "El internet es lo mejor que le paso al ser humano nos permite acceder a todo tipo de 
    informacion y captar influencias de los lugares mas remoto, mi trabajo se ve potenciado y por 
    eso <br>
    siento que debo agradecerle al internet o al que sea que lo haya inventado por darme la 
    oportunidad de ser un artista hoy en dia" </p></div>

Klarens Malluta

2
  • la etiqueta img la ¿estás colocando justo a lado del párrafo o esta quedando dentro de otra etiqueta?
    – user128299
    el 6 ago. 2021 a las 18:37
  • Hola, la etiqueta la estoy poniendo arriba del parrafo <div class="imagen"><img src="img/birds.jpg" alt="birds" width="400px" height="500px" ></div> el 6 ago. 2021 a las 18:44

2 respuestas 2

0

La imagen queda por encima del texto en razón de que la colocaste dentro de un div el cual es un elemento de bloque y ocupará como notas todo el ancho disponible enviando al div del texto hacia abajo.

Entonces para lograr que el texto quede justo a la derecha de la imagen puedes emplear esta opción:

<style>
  .caja {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
  }
</style>

<div class="caja">
  <div class="caja-imagen">
    aqui iría la imagen
  </div>
  <div class="caja-texto">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut sapiente, amet tempore fugiat quos eligendi necessitatibus illum quisquam nulla similique ipsam nesciunt voluptatem incidunt praesentium saepe, modi in minus doloremque.
  </div>
</div>

Donde como notas a través de CSS Grid le indicamos al contenedor que divida a sus elementos internos en 2 columnas de igual ancho.

Ahora si decides continuar con el uso de inline-block entonces debes aplicarlo a ambos div (es decir tanto al que contiene al imagen como al que contiene el párrafo), además creo que deberás definir un width para ambos elementos.

No debes colocarlo a la clase del párrafo por que de ese modo solo afectarás su contenido, es decir el texto pero seguirás sin lograr la distribución horizontal que pretendes.

1
  • 1
    buenisimo, con esto me funciono mil gracias por la ayuda el 6 ago. 2021 a las 21:26
0

Utiliza mejor display flex, flex alinea los hijos del contenedor, en el eje del block (horizontal) por defecto a menos que lo cambies con flex direction. Y listo tienes alineados los elementos en linea.

    <style>
        .content{
            display:flex
         }
         .content p{  
            width: 30%;
         }

    </style>
    <div class="content">
        <img src="http://lorempixel.com/200/400/" alt=""> 
        <p class="primer-parafo">
            Klarens Malluta es un artista Albano autodidacta que se 
            caracteriza por tener un estilo psicodelico y disruptivo. 
            <br>
            gran parte de su trabajo se ve influenciado por internet 
            dado que segun sus propias palabras.  "El internet es lo 
            mejor que le paso al ser humano nos permite acceder a 
            todo tipo de  informacion y captar influencias de los 
            lugares mas remoto, mi trabajo se ve potenciado y por  
            eso <br>
            siento que debo agradecerle al internet o al que sea que 
            lo haya inventado por darme la oportunidad de ser un artista hoy en dia" 
        </p>
    </div>

https://codepen.io/scarabax/pen/xxdymxB

1
  • No, lo acabo de probar y sigue igual el 6 ago. 2021 a las 19:01

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.