横に並べたグリッドの、コンテンツ量によって高さが違ってしまうことはよくあります。
コンテンツ量が異なるのは仕方ないとしても、デザイン的には背景色は揃えたいことはよくあります。

背景色を4つ並べた画像で作ってwrapperの背景として設定することも可能ですが、
jQueryで各同列要素の高さを取得し、一番大きいものにあわせることができます。

↓こんな場合も、
スクリーンショット(2013-03-29 10.55.07)

関数を作って引数に揃えたい要素を指定する方法。

[javascript]
function unifyHeight(elms)
{
//それぞれの高さを取得
var tmpmax = 0;
elms.each(function()
{
if(tmpmax < $(this).outerHeight()) tmpmax = $(this).outerHeight();
});
//高さを設定
elms.outerHeight( tmpmax );
}

//実行 ->引数に揃えたいclass要素などを指定
unifyHeight( $("#top-row-1 .span3") );
[/javascript]

↓こんな感じに。
スクリーンショット(2013-03-29 10.56.01)

…………………

もう一つのやり方….揃えたいクラスとその包括クラスを予め決めておく方法。最初の関数と違ってを何度も実行しなくとも大丈夫です。ですが包括する要素が入れ子になってる場合はおかしくなるかもです。要素の指定の仕方を疑似要素とかで調整すると大丈夫かもです。

[javascript]
function unifyHeight2()
{

var tmpmax;
var wrapper = ".unifHeight";
var element = ".unifHeight-element";

//包括クラスごとに
$(wrapper).each(function()
{
//それぞれの高さを取得
tmpmax = 0;
$(this).find(element).each(function()
{
if(tmpmax < $(this).outerHeight()) tmpmax = $(this).outerHeight();
});
//高さを設定
$(this).find(element).outerHeight( tmpmax );
});
}
unifyHeight2();
[/javascript]

↓HTMLはこんな感じで。
スクリーンショット(2013-03-29 11.23.54)

↓これが…
スクリーンショット(2013-03-29 11.18.59)

↓包括クラス(unifyHeight)ごとにこうなります。
スクリーンショット(2013-03-29 11.19.24)

背景色が薄くてすいません。それぞれ同列の要素の高さを揃えるものですが、揃えたい範囲によってはいろいろな方法がありますので調べてみてください。

【追記】

実行のタイミングは document.ready だとimgタグの画像の読み込み完了前なので正しく高さが取得できない。window.loadのタイミングで実行するのがよいようです。

[javascript]
$(window).bind(‘load’, function()
{
unifyHeight();
});
[/javascript]