Não é de hoje que algumas vezes precisamos trabalhar com diversas div´s que contenham a mesma classe porém, onde todas devem ter seus tamanhos iguais.
Caso os dados sejam estáticos podemos até mesmo setar o tamanho delas via css, mas porquê fazer isto se você pode setar direto via javascript? Não seria mais fácil?
Abaixo segue o fonte com o código e logo em seguida irei comentar as linhas com maior relevância para nosso entendimento.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
div.todas{
width:200px;
float:left;
margin-left:10px;
padding:10px;
color:#fff;
background:#000;
}
</style>
<script type="text/ecmascript">
$(document).ready(function () {
var maior = 0;
var todasDivs = $(".todas");
var atributos = new Array(todasDivs.length)
for (i=0; i<todasDivs.length; i++){
if (parseInt(todasDivs[i].offsetHeight) > parseInt(maior))
{
maior = parseInt(todasDivs[i].offsetHeight);
}
}
$(".todas").css("height", maior);
});
</script>
</head>
<body>
<div class="todas" title="primeira">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor nunc, volutpat at, sodales et, laoreet eget, erat. Fusce consequat. Nulla enim justo, ornare nec,
volutpat vel, tempor a, sapien.
</div>
<div class="todas" title="segunda">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor nunc, volutpat at, sodales et, laoreet eget, erat. Fusce consequat. Nulla enim justo, ornare nec,
volutpat vel, tempor a, sapien.
Maecenas posuere lobortis neque. Proin augue eros, tincidunt nec, aliquet nec, varius vel, nibh. Phasellus nibh neque, fringilla non, ornare ornare, suscipit sit amet,
metus. Aliquam suscipit luctus ligula. Aliquam quis diam tincidunt diam consequat faucibus. Nullam ultricies. Nunc neque. Nulla mauris dui, scelerisque ac, aliquet et,
fermentum nec, mi. Pellentesque ac lacus.
</div>
<div class="todas" title="terceira">
Praesent in libero sed ante pharetra egestas. Maecenas tincidunt lorem sed felis. Suspendisse ut augue sed turpis venenatis suscipit. Vestibulum pretium, sem sit amet
feugiat ullamcorper, ipsum neque laoreet libero, eget feugiat nisl quam in dui. Morbi nisl eros, dignissim at, mattis in, pellentesque sed, nisi. Donec vel metus. Sed
varius feugiat lorem. Sed nec purus.
</div>
</body>
</html>
Agora vamos à algumas explicações de como funciona o código.
Linha 19: Criamos uma variável e setamos seu valor igual a zero
Linha 20: Criamos uma variável na qual estamos setando todos as classes .todas do documento html.
Linha 21: Criamos uma array com a quantidade de divs que temos.
Linha 22 à 27: Fazemos um for que irá pegar todos os tamanhos das div´s e irá verificar qual é a maior.
Linha 28: Irá atribuir o maior valor para todas as divs.
Simples, não?
Olá pessoal, hoje vamos abordar um pouco sobre SEO para imagens, vamos levar algumas considerações iniciais:
Estruturando o código na tag img
Um cuidado que devemos sempre tomar é o tamanho da imagem na hora do recorte, veja sempre qual melhor extensão para utilizar .jpg, .png ou .gif, isso faz uma grande diferença!
Abraços!