11142 Suscriptores al Feed del Blog
84 Suscriptores al Feed de Anotaciones Breves
55 usuarios online
Mauricio Campos en 50 preguntas y respuestas de entrevistas de trabajo
Columnas de igual tamaño con jQuery
0 COMENTARIOS - Publicado hace 13 meses - Clasificado en: JQUERY, TUTORIALESEn cssnewbie me he encontrado una función para obtener columnas de igual tamaño. Cuando trabajamos con CSS, a veces puede resultar frustrande obtener columnas de igual tamaño. Un ejemplo de aplicación de la función sería:
1.- Supongamos que tenemos una estructura típica de HTML similar a ésta:
<div id="contenedor">
<div id="navegacion">Lo que sea 1</div>
<div id="contenido">Lo que sea 2</div>
</div>
Para que, independientemente del contenido que haya tanto en "navegacion" como en "contenido", las dos columnas tengan la misma altura deberíamos...
2.- Añadir una clase a las columnas que tengan la misma altura.
<div id="contenedor">
<div id="navegacion" class="columnas">Lo que sea 1</div>
<div id="contenido" class="columnas">Lo que sea 2</div>
</div>
3.- Añadir tanto la librería como la función "equalHeight"creada en cssnewbie y la llamada a dicha función especificando los elementos que deseamos igualar en altura. En nuestro caso los dos div con la clase "columnas".
<script type="text/javascript" src="jquery-1.2.6.js">
<script language="javascript">
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".columnas"));
});
Ver ejemplo en funcionamiento » »
Más información en "Equal Height Columns with jQuery"
Algunas entradas relacionadas:
- Cambiar propiedades CSS con JQuery
- Rollover sobre imágenes con jQuery
- Filtro :random con jQuery
- Construyendo un verdadero triple click con jQuery
- Tablesorter: Ordenar tablas de una forma sencilla
- jQuery Easing Plugin
- Efecto "Nudging" con JQuery
También te puede interesar:
|
|
|
|
|
