流动的箱子布局与不同的高度

时间:2009-12-07 09:32:10

标签: css layout

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

这样做的最佳方法是什么?
我希望我的问题有用,有点难以解释=)

2 个答案:

答案 0 :(得分:2)

我不确定这只能使用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,尽量不要使用每个变量,而是使用经典的for循环。

答案 1 :(得分:1)

关于相等高度列的此资源可能对您有所帮助: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

亲切的问候,健康。