Soy nuevo programando, estoy empezando hacer un proyecto, pero tengo una pregunta, como puedo juntar dos div?
-
pon su top a la misma altura– ChristianCommented el 2 ago. 2021 a las 16:44
-
Como lo puedo hacer? tengo que poner el margin-top igual?– ElvisitoCommented el 2 ago. 2021 a las 16:47
-
2@Elvisito por favor lee Cómo preguntar y realiza el recorrido de bienvenida, considera editar y agregar un ejemplo mínimo verificable que le permita ver a la comunidad que llevas– user128299Commented el 2 ago. 2021 a las 16:51
3 respuestas
Espero te sirva esta forma, utilizando display: flex en el div contenedor. Lo que hace flex es poner un div al lado del otro mientras haya lugar dentro del elemento padre, cuando el espacio no es suficiente, lo ubica debajo, siempre de izq a der. Saludos ;)
.container {
display: flex;
padding: 10px 10px 10px 0px; /*Estas medidas pueden variar al igual que las de width y height. Desde la izquierda: top, right, bottom, right*/
background-color: green;
}
.s1 {
background-color: red;
width: 100px;
height: 100px;
}
.s2 {
background-color: blue;
width: 400px;
height: 500px;
}
<div class="container">
<div class="s1"></div>
<div class="s2"></div>
</div>
Lo que debes hacer para que te queden los div alineados de manera horizontal, es agregarle al div los contiene el estilo display en flex, si dicho elemento contiene muchas otras cosas, lo que puedes hacer es crear un elemento que contenga esos 2 div que deseas alinear y a ese agregarle el estilo.
En mi caso lo dejé directamente en el atributo style, pero puedes crear una clase y hacer uso del estilo desde el atributo class.
Te dejo un ejemplo de como quedaría:
div {
border: red 1px solid;
}
<!-- En el div que tenemos como el contenedor le agregamos la etiqueta style y a este le anexamos el display: flex; -->
<div id="contenedor" style="display:flex;">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio vitae architecto eligendi cumque enim explicabo commodi. Alias minima laborum enim esse! Exercitationem libero nisi sequi, eius placeat dolorffdfibus voluptas quod.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio vitae architecto eligendi cumque enim explicabo commodi. Alias minima laborum enim esse! Exercitationem libero nisi sequi, eius placeat doloribus voluptas quod.
</div>
</div>
Espero te sirva.
Mira no se si te sirve puedes probar.
#contenedor{
overflow:hidden;
}
#1{
float: left;
}
#2{
float:left;
}
<div id="contenedor">
<div id="1">
div 1
</div>
<div id="2">
div 2
</div>
</div>
-
en realidad lo que requiere es aplicarle un display flex, para que ambos div queden alineados de manera horizontal– jGomezCommented el 2 ago. 2021 a las 17:05
-
1Al respecto de los id elegidos, recomendaría leer este recurso: developer.mozilla.org/es/docs/Web/HTML/Global_attributes/id– user128299Commented el 2 ago. 2021 a las 17:07