Question

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

当浏览器宽度较窄时（例如，当在移动设备上观看时），这成为问题，因为随着窗口变窄，字幕高度之间的差异变得更加明显。如果您使浏览器宽约450px并向下滚动到旋转木马下方，您会注意到每次旋转木马中的图像发生变化时，旋转木马下面的内容会向上/向下跳跃，以适应新图像的较小/较大尺寸字幕。

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

Answer 1

我希望给.carousel-caption div一个最小高度可以工作。如果没有，请尝试使用媒体查询在小型设备上为其提供准确的高度。

第一种方式：

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

第二种方式：

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

}

对于小段，底部可能有一些空的空间，但是没有出路。这至少会阻止它上升。

Answer 2

如果你说标题容器需要适应它的子元素（要显示的字符数量），你可以尝试@Darshan建议的overflow: hidden; css属性，或者你可以设置标题容器到其相对父级中的绝对位置。

例如，

<div class="relative" style="position: relative">
    <div class="child" style="position: absolute; bottom: 0; left: 0;">
        <p> My text yadda yadda yadda... </p>
    </div>
    <div style="clear: both;"></div>
</div>

将父容器设置为relative会重置其子元素的边界，然后所有子元素位置将绑定到relative位置的最近父容器。

通过这种方式，内容仍会显示，但只要相对父级没有高度规范，它就不会下拉到页面上的其他内容中。

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

2 个答案: