動態的DIV與相同高度

可能重複：
How to make floating inner divs the same height as the highest div 動態的DIV與相同高度

我有可變內容的DIV的可變量（內容經由API拉入）。他們都是float: left。你可以在這裏找到一個例子：http://playgrounds.affiliate-howto.de/

正如你所看到的，如果在一個DIV中的描述比其他的短，那麼設計就會被破壞。

我寧願用CSS解決這個問題，但找不到解決方案。如果沒有，JS也沒關係......

來源

2012-03-30 nucci

你可以給所有物品相同的高度？ '.sh_item {height：Npx; }' – mrtsherman 2012-03-30 21:05:44

設計您的網站以處理您擁有的內容。這是一個糟糕的設計問題。 – 2012-03-30 21:17:49

問題是，我沒有設計網站或內容。我創建了將API中的內容從用戶的wordpress網站中提取出來的插件。所以我不知道會有多少和什麼內容。我想得到一個不強制用戶更改代碼的解決方案。 – nucci 2012-03-30 21:54:35

可以以使的DIV超過一定尺寸不小於（即高度）

來源

2012-03-30 21:05:23

是的，但是如果我這樣做了，我得到了更多信息的DIV高於最低高度，我和現在一樣。而不是使用最小高度，我可以給所有的DIVs相同的高度值。但是，如果框中的內容較少且空白太多，那看起來不太好。所以這不是一個選項... – nucci 2012-03-30 21:10:25

然後你需要限制產品描述。例如，在最大可以有兩條線。在這種情況下，最小高度可以提供幫助（對於僅佔一行的標題）。爲此，您可以使用標題限制元素的最大高度。 – 2012-03-30 21:13:01

使用「最小高度」 CSS屬性可以只設置所有的盒子都是312px，這是它的當前尺寸。

你可以用CSS做：

<style type="text/css"> 
.sh_item{ 
height:312px important; 
} 
</style>

或者你也可以做到這一點JavaScript的（jQuery的）方式：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.sh_item').css('height', '312px'); 
}); 
</script>

還只是一個小提示，使用ID時，你不應該在文檔中不止一次具有相同的元素，因爲CSS不會找到該元素（它只會查找第一個元素，而具有相同ID的其餘元素將被忽略）。

例如，您正在使用的每件物品sh_id。 ID是爲元素提供唯一ID的屬性，因此爲所有元素提供相同的ID將無法正常使用CSS，也不是ID的要點。你可以做sh_id1,sh_id2,sh_id3等，但它是你的選擇。如果要爲多個元素提供相同的樣式，請使用class屬性。

希望這有助於:)

來源

2012-03-30 21:09:29 Shawn31313

謝謝你的回答。是的，我知道這並不意味着有多次唯一的ID。但是DIV是通過php腳本創建的。它正在做的是，它通過api在「spreadshirt.net」上「讀取」商店，併爲其「接收」的每個產品創建一個DIV。因爲有很多不同的商店和產品，所以不能將高度設置爲參數。它必須是動態的，並且必須是最高「容器」的高度...... – nucci 2012-03-30 21:40:05

然後使用javascript方法。它仍然會正確調整它們的大小。 – Shawn31313 2012-03-30 21:54:13

我有同樣的問題在我的網站一次。這個解決方案對我很有幫助（適用於很多瀏覽器，也不支持最小高度的樣式，比如IE6）：http://www.impressivewebs.com/equal-height-columns-with-javascript-full-version/

來源

2012-03-30 21:10:14 Marek

除了Shawn31313的回答，你應該給你的「sh_name」類特定的高度，比如「25px」並添加overflow：隱藏，以防止重疊文本。

您還可以通過使用PHP修剪文本，如果文本長度超出預期，請添加「...」。

來源

2012-03-30 21:37:41 selo

動態的DIV與相同高度

回答

相關問題