Question

我有一个img轮播，右边的描述内容适用于宽屏幕窗口，然后当浏览器窗口到达断点时，描述位于图像下方。我想根据最长描述中的文本数量来调整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>

Answer 1

此StackOverflow question中提出了非常类似的问题。并回答如下“也许你可以删除高度属性（确保它没有在CSS中设置）并让DIV自己扩展高度。”回答查询的夫妇找到哪个是最高的，以检测所需的高度，例如......这里是另一个StackOverflow response，涵盖了如何。

你有一个我们可以查看的例子。请在代码中发布演示或粘贴的链接。

<强>更新：这是一个易于使用的jQuery函数的文档，它允许我们获取和操作元素'height：http://api.jquery.com/height/

第二次更新：（感谢您添加要使用的示例代码）

取决于我们需要的具体方式（即，AllElementsHeight必须等于......）匹配元素集合中第一个元素的当前计算高度，包括填充，边框和可选边距。“（例如，基于在这个请求要求我们可以使用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

var $d = $( ".description" ), 
    tallestDivHeight = 0


$d.each(function (i, v) {
    var $t = $(this), 
        thisDivsHeight = $t.outerHeight()

    console.log(thisDivsHeight)

    if(thisDivsHeight > tallestDivHeight) tallestDivHeight = thisDivsHeight
})


$d.css('height', tallestDivHeight)

Answer 2

您将遇到的问题是高度会根据描述的行数而变化。这将根据窗口大小，字体大小和字体系列以及不同浏览器用于呈现文本的任何变体而有所不同。

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

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');
}

根据文本长度设置轮播容器div的高度

2 个答案: