css - 如何应对可变高度的内容？

Question

关于 this page ，有一个图像轮播(来自 Twitter Bootstrap)，它显示了一系列图像和标题。所有图像的高度都相同，但包含旋转木马标题的元素将根据标题文本的长度而有不同的高度。

当浏览器宽度较窄时(例如在移动设备上查看时)，这会成为一个问题，因为随着窗口变窄，字幕高度之间的差异变得更加明显。如果您将浏览器设置为大约 450 像素宽并向下滚动到轮播下方，您会注意到每次轮播中的图像发生变化时，轮播下方的内容都会向上/向下跳动，以适应新图像的更小/更大尺寸标题。

这使得很难阅读轮播下方的任何文本(在小屏幕上)，因为内容大约每 5 秒向上/向下跳动一次。除了将轮播放在页面的最底部或禁用轮播图像的自动循环之外，是否有解决此问题的方法？

Answer 1

我希望给 .carousel-caption div 设置一个最小高度能奏效。如果不是，请尝试在小型设备上使用媒体查询为其提供准确的高度。

第一种方式:

.carousel-caption {
  min-height: 300px !important;
} 

第二种方式:

@media screen and max-width:xxxpx
{
.carousel-caption {
  height: 300px !important;
} 

}

对于小段落，底部可能会有一些空白，但没有出路。这至少可以防止它上下颠倒。