我正在使用MVC 1.0工作(但很快就会升级到2.0)
该网站有一个顶部标题和一些包含下面信息的框(UL元素)
我想使用浏览器的整个宽度来利用宽屏显示器,因此每行的盒子数量取决于浏览器窗口的宽度。
问题是盒子没有固定的高度,高度取决于每个盒子的内容
每行的高度应该由该行的最大框设置。
这样做的最佳方法是什么?
我希望我的问题有用,有点难以解释=)
答案 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
亲切的问候,健康。