基于文本长度设置轮播的容器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的高度

回答

相关问题