不同高度的流动框布局

Question

我正在使用MVC 1.0的网站上工作（但很快会升级到2.0）。
该网站有一个顶部标题和一些包含下面信息的框（UL元素）。
我想使用浏览器整个宽度来利用宽屏幕显示器，因此每行的盒子数量取决于浏览器窗口的宽度。
问题是盒子没有固定的高度，高度取决于每个盒子的内容。
每行的高度应该由该行上的最大框设置。

这样做的最好方法是什么？
我希望我的问题让SENCE，这是一个有点难以解释=）

Answer 1

我不确定这是可能的只使用CSS。 但是，你可以使用Javascript来做到这一点。

用div和tehn包装你的元素，将div的高度用javascript设置为较大的盒子的高度。

<div class="box-wrapper"> 
    <div id="box1" class="a-box"> 
    <!-- content --> 
    </div> 
</div> 
<div class="box-wrapper"> 
    <div id="box2" class="a-box"> 
    <!-- content --> 
    </div> 
</div> 
<div class="box-wrapper"> 
    <div id="box3" class="a-box"> 
    <!-- content --> 
    </div> 
</div> 

然后，做jQuery的文件准备好以下几点：

var maxheight=$(".a-box").eq(0).height(); 
$(".a-box").each(function(){ 
    if(maxheight<$(this).height()) 
    maxheight=$(this).height(); 
}); 

$(".box-wrapper").height = maxheight; 

注：此代码是不是在所有优化，你应该使用，而不是重复selmectors变量，尽量不要使用各，而是一个经典的循环代替。

Answer 2

关于等高coloumns可能会帮上你这个资源： http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

亲切的问候，mtness。