0

我有一个css问题。检查我的网站http://yourdesigns.nl/ssi/index.php

如您所见，我在索引页面的中心有一个 3 列行。每列都有一个边框，给人一种“盒子状”的感觉。问题是，一旦一个盒子的内容比另一个盒子小，盒子的高度就会变小。

我的目标是给所有盒子相同的高度，我知道这可以通过简单地将 height 属性添加到我的盒子元素的类中，但是所有内容都是从数据库中获取的，所以如果我的客户更新内容，它可能框可能大于类的固定高度值，这导致内容与边框/框重叠。

我怎样才能让我的所有盒子都具有相同的高度，而不在我的 CSS 中给出固定的高度值？

提前致谢，

迈克尔

4

5 回答 5

2

If you want to keep the box heights equal and prevent overflow you could set the height and overflow properties in CSS for your box class:

.boxes
{
   height:500px;
   overflow: hidden;
   text-overflow:ellipsis; // ends the text block with "..." - css3 no ie7/ie8 support
}

If you want the boxes to re-size dynamically based on the largest box you could use jQuery:

$(document).ready(function () {      
   var largestBox = Math.max($('#box1').height(),$('#box2').height(),$('#box3').height());
   $('.boxes').height(largestBox );
});

Here's a jsfiddle demonstrating the jQuery option: http://jsfiddle.net/EjPSw/

于 2013-02-15T21:25:01.120 回答
1

You could try using jQuery.

Give each box an id, for example box1, box2, box3;

U could use jQuery like this:

$(function(){
var box1 = $("#box1").height();
var box2 = $("#box2").height();
var box3 = $("#box3").height();

if((box1 > box2) && (box1 > box3))
{
   box2.height(box1);
   box3.height(box1);
} 
else if((box2 > box1) && (box2 > box3))
{
   box1.height(box2);
   box3.height(box2);
}
if((box3 > box2) && (box3 > box1))
{
   box2.height(box3);
   box1.height(box3);
}
});
于 2013-02-15T21:26:18.593 回答
1

你必须将你的盒子放在一个 div 容器中。外容器应该有样式

{
    overflow: hidden;
    border-bottom:1px solid gray;
}

而容器内的盒子应该有风格

{
    border:1px solid gray;
    float:left;
    text-align:center;
    padding-bottom: 200em;
    margin-bottom: -200em;
}

按照示例的链接：

于 2013-02-15T21:09:13.220 回答
0

我不知道非 css3 解决方案，我会通过计算所有框来选择 jQuery 解决方案，而不是为所有框指定最高高度。

于 2013-02-15T21:08:16.127 回答
0

尝试类似的东西

 min-height: 500px
于 2013-02-15T20:59:59.497 回答