基於文本長度設置輪播的容器div的高度

我有一個img輪播的寬屏窗口右側的描述內容，然後當瀏覽器窗口到達斷點時，描述將在圖像下方顯示。我希望根據最長描述中的文本數量來確定div的大小，否則會根據描述中的文本量上下移動頁面的其餘部分。基於文本長度設置輪播的容器div的高度

我假設我需要一些JavaScript，通過所有的旋轉木馬文本說明，然後根據最長的描述文本設置容器div的高度。

任何想法如何做到這一點？

更新： 我創建了這個http://jsfiddle.net/chpucat0/顯示我需要什麼。我需要所有div的所有高度來匹配其中文本最多的div。

<div class="description">Small amount of text</div> 
<div class="description">Slightly larger amount of text.</p> 
<div class="description">And then the really, really, really long description here.</div>

來源

2014-09-26 NateW

這裏作爲最佳實踐在計算器上這些類型的問題確實應該有某種形式的演示所以不只是給你免費的代碼和社區可以從答案學習，而不僅僅是複製和你的答案粘貼到他們的代碼。 http://jsfiddle.net/是一個易於使用和經常使用的工具，用於這樣的演示。這就是爲什麼我沒有像@ Phatjam98那樣提供代碼。 – 2014-09-26 17:48:22

感謝您花時間告訴我...我感謝您的周到方法。我更新了我的帖子，並簡化了我所需要的內容。我仍然爲如何實現正確的代碼而苦苦掙扎。你能進一步幫助我嗎？ – NateW 2014-10-02 14:15:50

在這個StackOverflow question中詢問了非常類似的問題。並回答如下：「也許你可以刪除高度屬性（確保它沒有在CSS中設置），並讓DIV自行擴展。」幾個答案與查詢找到哪個是最高的來檢測所需的高度，例如...這裏是另一個StackOverflow response，涵蓋了如何。

您是否有我們可以查看的示例。請發佈鏈接到演示或粘貼您的代碼。

更新：這裏是文檔，一個易於使用的jQuery的功能，這將使我們獲得和操縱元素的height：http://api.jquery.com/height/

第二次更新：（謝謝用於添加示例代碼來處理）

取決於我們需要的具體方式（即，AllElementsHeight必須等於...「當前c （例如，基於這個請求的要求，我們可以使用jQuery的'.outerHeight（）'（還有其他方法可以獲得這些數據（比如獲得Javascript的'offsetHeight'，我會忽略性能變化的爭論，因爲它在網上有很好的記錄（即，http://jsperf.com/outerheight-vs-offsetheight））））），我們可以使用jQuery給我們最大的div的高度height，這裏是提供多個例子的jQuery documentation。

我已經分叉了更新後的小提琴，可以在這裏查看http://jsfiddle.net/id_0t/h6ndwf2x/。

以下是概念代碼在更新的小提琴發現證明：

HTML

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut nisi et tortor aliquet viverra at a nibh. Aenean dictum diam tortor, aliquam posuere nunc elementum sit amet.</div> 

<p class="description">Curabitur quis neque ut enim dignissim cursus.</p> 

<div class="description">Ut vehicula dolor a mi aliquam feugiat. Integer varius ipsum non nisl vehicula mattis. Curabitur eget eleifend ex. Proin eu quam mi. Sed non mauris dui. Integer tempus at velit id interdum. Fusce sed ultrices nisi. Pellentesque consectetur diam in magna dapibus imperdiet. Pellentesque consectetur diam in magna dapibus imperdiet.</div> 

<div> 
    This 'div' will not have its height defined because it doesn't have the ".description" class applied to it. 
</div>

CSS

div { 
    background-color: #efefef; 
} 
.description { 
    background-color: grey; 
    margin: 20px; 
    padding: 10px; 
}

的Javascript

來源

2014-09-26 17:29:39

非常感謝你！這正是我需要的。我非常感謝你的幫助和周到的解釋方式。 – NateW 2014-10-03 14:10:49

你要的問題是，基於描述有多少行是高度的變化。這將根據窗口大小，字體大小和字體系列以及不同瀏覽器用於呈現文本的任何變化而有所不同。

最好的方法可能是循環你的集合，抓住每個描述元素的高度。例如：

var maxHeight = ''; 
var heights = []; 

$.each(collection, function(item){ 
    heights.push(item.outerHeight(true)); 
} 

maxHeight = Math.max.apply(Math, heights);

maxHeight應該包含您可以設置所有描述高度的最大數字。

$.each(collection, function(item) { 
    item.css('height', maxHeight + 'px'); 
}

來源

2014-09-26 17:42:24 Phatjam98

基於文本長度設置輪播的容器div的高度

回答

相關問題