¿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?
.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=" 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?
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:
Y aquí está el HTML actualizado:
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”.