Question

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

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

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，尽量不要使用每个变量，而是使用经典的for循环。

Answer 2

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

亲切的问候，健康。

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

2 个答案: