30
abr

Columnas de igual altura con jQuery

Cuando se utiliza una tabla, todas las columnas de este cuadro tiene la misma altura. Antiguamente esto no era un problema en absoluto ya que se maquetaba con tablas, pero ahora, con el aumento de las hojas de estilos (CSS) ahora es algo más complicado.

Añadimos en el head la librería jQuery y el plugin EqualHeights:

<script type="text/javascript" language="javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/javascript" language="javascript" src="javascript/transBG.jquery.plugin.js">

Ponemos los estilos:

<style type="text/css">
	body{color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
	#container {margin:0 auto; width:980px; padding-top:10px;}
	h1 {color:#000; font-size:18px;}
	h2 {color:#000; font-size:14px; padding-bottom:5px;}
	.container { float:left; clear:left; width:100%; padding:0 0 2em; }
	.box { float:left; width:24%; margin-right:1%; background-color:#FF0000; }
	.box p { margin:.5em; padding:0; }
</style>

Y añadimos el selector:

<script language="javascript" type="text/javascript">
	$(function(){ $('#mismaAltura').equalHeights(); });
</script>

La capa con la id=mismaAltura hará el efecto.

Y por último el código html:

        <h2>Columnas sin igual alturas</h2>
        <div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
        <div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><p>C</p></div>
        <div class="box"><p>D - Ut enim ad minim</p></div>
        <br clear="all" /><br />
        <h2>Columnas con la misma altura</h2>
        <div class="container" id="mismaAltura">
            <div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
            <div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <div class="box"><p>C</p></div>

            <div class="box"><p>D - Ut enim ad minim</p></div>
        </div>

Ejemplo: aquí.
Descarga: aquí.

Bookmark and Share
aaa

Ningún comentario

Aún no hay comentarios.

Tienes que estar conectado para publicar un comentario.

Comentarios RSS Feed   TrackBack URL