不同高度的流動框佈局

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。