3

在此页面上，有一个图像轮播（来自 Twitter Bootstrap），其中显示了一系列图像和标题。所有图像的高度相同，但包含轮播标题的元素的高度将根据标题文本的长度而有所不同。

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

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

4

2 回答 2

1

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

第一种方式：

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

第二种方式：

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

}

这可能在小段落的底部有一些空白空间，但没有出路。这至少可以防止它上下波动。

于 2013-01-28T17:58:24.420 回答
0

如果您说标题容器需要适应它的子元素（要显示的字符数量），您可以尝试@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位置的最近父容器。

这样，内容仍会显示，但不会下降到页面上的其余内容中，只要相对父级没有高度规范。

于 2013-01-28T19:27:26.970 回答