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.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo poner la div principal de texto a la izquierda y la div principal de la imagen a la derecha? Alguna parte del área del texto principal debería estar encima de la div de la imagen principal. ¿Como en la foto?

¿Cómo puedo poner la div principal de texto a la izquierda y la div principal de la imagen a la derecha? Alguna parte del área del texto principal debería estar encima de la div de la imagen principal. ¿Como en la foto?

14 Jul, 2023 Programación

descripción de la imagen

.main {
  width: 80%;
  margin: auto;
  overflow: auto;
  display: flex;
}

.main-text {
  position: relative;
  width: 674px;
  display: inline-block;
  grid-row: 1/2;
}

.main-img {
  float: right;
  position: relative;
  top: 0;
}

.main h1 {
  font-size: 54px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}


<div class="main">
  <div class="main-text">
    <h1>Encuentra tu espacio de bienes raíces comerciales personalizado.</h1>
    <p>
      ¿En qué consiste exactamente el ejército que ves en tus ojos? ¿Qué va a ocurrir después de eso? ¿O simplemente dónde eres
      intencionalmente fugitivo, para evitar seguir adelante contigo?
    </p>
    <form action="/action_page.php">
      <input
        type="email"
        id="email"
        name="email"
        placeholder="&#xf003; Tu dirección de correo electrónico"
        style="font-family: Arial, FontAwesome"
      />
      <input type="submit" value="Suscribirse" />
    </form>
  </div>
  <div class="main-img"><img src="building.png" alt="building" /></div>
</div>

Hola a todos,
Quiero clonar el sitio web de CutSpace.

¿Cómo puedo colocar la div main-text a la izquierda y la div main-img a la derecha? Algunas áreas de main-text deberían estar encima de la div main-img. ¿Así como en la foto?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para colocar el div “main-text” a la izquierda y “main-img” a la derecha, puede utilizar la propiedad “float” en CSS.

    Para la clase “.main-text”, puede eliminar la propiedad “display: inline-block;” y agregar “float: left;”. Y para la clase “.main-img”, puede eliminar la propiedad “position: relative;” y agregar “float: right;”.

    Para asegurarse de que algunas áreas del div “main-text” aparezcan por encima del div “main-img”, puede utilizar la propiedad “position: relative;” en la clase “.main-text” y ajustar la propiedad “top” según sea necesario.

    Aquí está el CSS actualizado:

    .main {
  width: 80%;
  margin: auto;
  overflow: auto;
  display: flex;
}

.main-text {
  position: relative;
  width: 674px;
  float: left;
  grid-row: 1/2;
}

.main-img {
  float: right;
  top: 0;
}

.main h1 {
  font-size: 54px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

    Y aquí está el HTML actualizado:

    <div class="main">
  <div class="main-text">
    <h1>Encuentra el espacio de bienes raíces comerciales personalizado que buscas.</h1>

      In oculis quidem exercitus quid ex ea consequatur? autem vel eum fugiat, quo pertineant ero tibique

    <form action="/action_page.php">
      <input type="email" id="email" name="email" placeholder=" Tu dirección de correo electrónico" style="font-family: Arial, FontAwesome">
      <input type="submit" value="Suscribirse">
    </form>
  </div>
  <div class="main-img"><img src="building.png" alt="building"></div>
</div>

    Esto debería resultar en que el div “main-text” esté a la izquierda y el div “main-img” esté a la derecha. Algunas áreas del div “main-text” deben aparecer por encima del div “main-img”.

Comments are closed.