jquery - 如何使用 CSS 设置 JQuery FlexSlider 高度？

Question

我不是很喜欢 CSS，我有以下网站使用 BootStrap CSS 框架和 FlexSlider JQuery 插件来显示上面的幻灯片:http://onofri.org/WP_BootStrap/

我对如何降低幻灯片放映高度有以下疑问:如果使用 FireBug，我会降低 .flex-viewport 高度的 ma​​x-height 的值，这一:

.flex-viewport {
    max-height: 2000px;
    transition: all 1s ease 0s;
}

我发现显示的图像区域的高度已降低到新值(例如 200 像素)好吧，但现在我遇到了问题，我的图像上写的文本(由 . flex-caption-text paragraph) 位置不佳:

            <div id="main-slider" class="flexslider">
                <ul class="slides">
                    <li>
                        <img src="http://localhost/wordpress/wp-content/themes/AsperTheme/assets/img/flexslider/flex-1.jpg"/>
                        <div class="flex-caption">
                            <p class="flex-caption-text">
                                <span>Lorem ipsum</span>
                                <br>
                                <span>sit dolor</span>
                                <br>
                                <span>adipiscing elitur</span>
                            </p>
                        </div>
                    </li>

为了让文本处于合适的位置，我认为我可以降低 .flex-caption 类的 top 属性的值

.flex-标题{ position:absolute； 右:8%； 顶部:35%；

这是一个好的解决方案还是我会遇到其他类型的问题(可能在不同于 FireFox 的浏览器中)？

其他疑点与 FireBug 行为有关，事实上，如果我执行以下操作:

1) 我以这种方式更改 max-height in.flex-viewportin 的值:

.flex-viewport {
    max-height: 200px;
    transition: all 1s ease 0s;
}

正如我所说，幻灯片图像区域的高度降低了

2) 我突出显示将鼠标光标放在此 html 行上的单张幻灯片的内容:

<ul class="slides" style="width: 1000%; margin-left: -1288px;">

在这种情况下，FireBug 以蓝色显示该区域的高度，在我看来它与旧容器的高度相同(2000 像素)，为什么？

谢谢

安德里亚

Answer 1

改为将 .flex-viewport 的值改为 max-height: 200px;

在 flexslider.css 文件中更改 .flexslider .slides img 的高度值 例如:

 .flexslider .slides img {
width: 100%; 
height:200px;
display: block; }

它不会影响你写在我图片上的文字