You are here
Igualar el tamaño de los DIVs con CSS y JavaScript Sin categoría 

Igualar el tamaño de los DIVs con CSS y JavaScript

Igualar el tamaño de los DIVs con CSS y JavaScript

La creación de un div con divs interiores puede presentar algunos retos difíciles. Altura constante es uno de los problemas comunes de estos divs interiores.

A veces podemos tener 2 divs interiores tienen 2 diferentes colores de fondo que son diferentes de fondo del div que contiene.

Sin embargo, es muy probable que estos divs interiores no son de la misma altura, lo que significa que tendrá un problema extraño que veremos a continuación con el primer ejemplo.

Por lo general, me gustaría animar a una solución CSS, JavaScript, pero puedo ser buena solución para este problema.

Vamos a embarcaciones de nuestra HTML dónde ver el problema.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
<Style>
.envase {
    background-color: #CCC; 
    Anchura: 600px;
    Color: #fff;
    padding: 5px;
}
.izquierda {
    background-color: # 09C; 
    Anchura: 300px;
    flotador izquierdo;
}
.derecho {
    background-color: # 3C3;
    Anchura: 300px;
    flotar derecho;
}
</ Style>
<div clase = "contenedor" >
    <div clase = "left" >
        <P> Vivamus magna Justo, lacinia eget consectetur sed, convallis en Tellus. Vestibulum ac diámetro sit amet quam vehicula elementum sed sit amet dúos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ P>
    </ Div>
    <div clase = "right" >
        <P> Sed porttitor lectus nibh. Justo vivamus magna, lacinia eget consectetur sed, convallis en Tellus. Proin eget tortor Risus. nisi quisque velita, pretium ut lacinia en, elementum Identificación del enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diámetro sit amet quam vehicula elementum sed sit amet dúos. Curabitur no nulla sit amet nisl tempus quis convallis ac lectus. Pellentesque en ipsum Identificación dapibus Orci porta. Proin eget tortor Risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. </ P>
    </ Div>
    <div style = "clear: both;" > </ div>
</ Div>

Usted puede ser nuevo en el “clear: both;” propiedad, pero todo lo que hace es propiedad CSS para envolver el div que contiene alrededor de los divs interiores.

En el ejemplo, hay un problema con este diseño.

Ciertamente se podría jugar el juego de adivinanzas y trate de añadir un gran relleno de fondo o tratar de adivinar la altura de cada div.

Sin embargo, estas soluciones CSS no entregará una solución eficaz.

Por lo tanto, podemos utilizar JavaScript para crear una buena solución.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<Style>
.envase {
    background-color: #CCC; 
    Anchura: 600px;
    Color: #fff;
    padding: 5px;
}
.izquierda {
    background-color: # 09C; 
    Anchura: 300px;
    flotador izquierdo;
}
.derecho {
    background-color: # 3C3;
    Anchura: 300px;
    flotar derecho;
}
</ Style>
<div id = "ContainerId" clase = "contenedor" >
    <div id = "leftId" clase = "left" >
        <P> Vivamus magna Justo, lacinia eget consectetur sed, convallis en Tellus. Vestibulum ac diámetro sit amet quam vehicula elementum sed sit amet dúos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ P>
    </ Div>
    <div id = "rightId" clase = "right" >
        <P> Sed porttitor lectus nibh. Justo vivamus magna, lacinia eget consectetur sed, convallis en Tellus. Proin eget tortor Risus. nisi quisque velita, pretium ut lacinia en, elementum Identificación del enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diámetro sit amet quam vehicula elementum sed sit amet dúos. Curabitur no nulla sit amet nisl tempus quis convallis ac lectus. Pellentesque en ipsum Identificación dapibus Orci porta. Proin eget tortor Risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. </ P>
    </ Div>
    <div style = "clear: both;" > </ div>
</ Div>
<Script>
    document.getElementById ( 'leftId' ) .style.height = document.getElementById ( 'rightId' ) .offsetHeight;
</ Script>

El uso de JavaScript, hacemos los DIV interior de la misma altura que los otros.

Ya sabíamos que el div derecha era más alto que el div izquierda, por lo que acabamos de fijar la altura de la div izquierda igual a la altura de la div derecha.

Por supuesto, si usted no sabe qué div interiores serán más altos, puede crear una sentencia if que determina qué div es más alto.

Una última nota antes de ir es que el relleno puede afectar a las alturas, por lo que debe incluir el relleno en la altura de la div.


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts