Newsmade

Java script e Ajax sem lero lero

Voltar
Colunas com alturas iguais em CSS
Quem já não passou pelo problema de que as colunas do site não acompamhavam o tamanho das outras colunas e assim acarretando algumas vezes “quebras de layout”? Pois bem, já postei aqui uma solução não muito bem aceita utilizando CSS, mas dessa vez vamos implementar uma solução com JavaScript e uma outra com a utilização do Framework jQuery. A primeira solução que utiliza JavaScript puro foi desenvolvida por Matthew Pennell, e o código e sua utilização consistem da seguinte forma. Primeiro você irá precisar de uma função para capturar os elementos da página: [code]function $() { var elements = new Array(); for (var i=0;i de seu site, e após adicione também o seguinte código para que ele seja executado no carregamento da página: [code]window.onload = function() { BoxHeights.equalise('one','two','three','four'); } [/code] Dentro da função equalise você deve adicionar os “ids” das divs que deseja igualar a altura. O código final então ficaria da seguinte forma: [code] [/code] A segunda solução utiliza um plugin para jquery criado pelo blog Filament Group. Sua utilização é bem mais simples, onde dependeremos do jQuery e do plugin EqualHeights. Observe a seguinte estrutura HTML: [code]

A - Lorem ipsum dolor sit amet

B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

C

D - Ut enim ad minim

[/code] Basta agora você efetuar uma chamada da div pai para o plugin que todas as divs filhas terão a mesma altura, da seguinte forma: [code]$(document).ready(function(){ $('#equalize').equalHeights(); }); [/code] [img]http://www.pinceladasdaweb.com.br/blog/uploads/colunas-mesma-altura/equal-height-columns.gif[/img] Imagem retirada do site de Matthew James Taylor [quote]Fonte: Pinceladas da Web[/quote]
Postado 28/05/2009 21:44 por Jeison Frasson

© 2002-2010 Grupo Newsmade - Quase todos os direitos reservados.