es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Posiciona la imagen a la derecha del contenido utilizando css/bootstrap.

05 Aug, 2023 Programación

Estoy tratando de posicionar una imagen a la derecha del área de contenido como se muestra en este diseño de Dribble.

https://dribbble.com/shots/15571736-Money-Transfer-Website

Aquí está lo que tengo hasta ahora.

.content {
  position: relative;
}
.bg-image {
  position: relative;
  top: 350px;
  left: 450px;
  height: 350px;
  z-index: 2;
}

Cuando floto la imagen o la posiciono usando las propiedades “top” y “left”, el diseño se distorsiona.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para posicionar la imagen a la derecha del área de contenido sin distorsionar el diseño, puedes utilizar el diseño CSS Flexbox. Así es cómo hacerlo:

    1. Envuelve el área de contenido y la imagen en un elemento contenedor, llamémoslo “.wrapper”
    <div class="wrapper">
  <div class="content"> <!-- tu contenido aquí --> </div>
  <div class="bg-image"> <!-- tu imagen aquí --> </div>
</div>
    1. Establece “.wrapper” para que se muestre como flex y justify-content: space-between, para crear espacio entre el contenido y la imagen.
    .wrapper {
  display: flex;
  justify-content: space-between;
}
    1. Elimina las propiedades position, top y left de “.bg-image” y establece el ancho y la altura como desees.
    .bg-image {
  width: 40%;
  height: 400px;
}

    Nota: para una mejor capacidad de respuesta, puedes utilizar un Media Query y disminuir el ancho de “.bg-image” en pantallas más pequeñas.

    Ahora tu HTML y CSS deberían verse así:

    <div class="wrapper">
  <div class="content">
    <!-- tu contenido aquí -->
  </div>
  <div class="bg-image">
    <!-- tu imagen aquí -->
  </div>
</div>

.wrapper {
  display: flex;
  justify-content: space-between;
}

.bg-image {
  width: 40%;
  height: 400px;
}

    Esto debería posicionar la imagen a la derecha del área de contenido sin distorsionar el diseño. ¡Feliz programación!

Comments are closed.