CSS元素類 - 高度因內容而異，如何解決？

我有一個問題與CSS。檢查我的網站http://yourdesigns.nl/ssi/index.php CSS元素類 - 高度因內容而異，如何解決？

正如你可以看到我有一個3列的行在索引頁的中心。每列都有一個邊框，可以產生「盒子般的」感覺。問題是，一旦一個盒子的內容較少，那麼盒子的高度就會變小。

我的目標是讓所有的盒子都具有相同的高度，我知道這是可能的，只需將高度屬性添加到我的盒子元素的類中，但所有內容都是從數據庫中抓取的，所以如果我的客戶端更新內容，這些框可能大於該類的固定高度值，從而導致內容與邊框/框重疊。

我怎樣才能讓我所有的箱子具有相同的高度，而不會在我的css中給出固定的高度值？

由於提前，

邁克爾

來源

2013-02-15 Michael Koelewijn

只是要清楚，你想要的框能夠擴展，如果需要容納更多的內容，但希望所有三個保持相同的高度？ – Jack 2013-02-15 21:06:56

你看過嗎？你可能會在這裏找到答案。 http://css-tricks.com/fluid-width-equal-height-columns/ – Seanbish 2013-02-15 21:34:42

如果你想保持框的高度相等，防止溢出，你可以在CSS中爲你的盒子類設置高度和溢出屬性：

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

如果你想的箱子重新大小動態地根據您可以使用jQuery的最大的盒子：

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

這裏有一個展示的jsfiddle jQuery的選項：http://jsfiddle.net/EjPSw/

來源

2013-02-15 21:25:01 Jack

你在你的jsfiddle例子中缺少＃box3。 – 2013-02-15 21:31:21

好的，謝謝！我更新了小提琴。 – Jack 2013-02-15 21:32:36

不客氣，我們都在這裏幫助每個人，不是嗎？:) – 2013-02-15 21:33:38

試着這麼做

min-height: 500px

來源

2013-02-15 20:59:59 mika

我不知道一個非CSS3的解決方案，我會去一個jQuery解決方案通過計算所有的箱子而不是給所有的箱子最高的高度。

來源

2013-02-15 21:08:16 SheperdOfFire

你必須把你的箱子放在一個div容器中。外容器有風情

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

而容器內的盒子應該有風格

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

點擊此鏈接爲example：

來源

2013-02-15 21:09:13 Victor

你可以嘗試使用jQuery。

給每個盒子一個id，例如box1，box2，box3;

ü可以使用jQuery這樣的：

$(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-15 21:26:18

更快使用'Math.max'來比較箱體高度並選擇最大值，然後將其分配給所有箱子。沒有if/else需要這種方式（請參閱下面的示例） – Jack 2013-02-15 21:29:55

你對此真實:) – 2013-02-15 21:31:01

CSS元素類 - 高度因內容而異，如何解決？

回答

相關問題