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

我不是很成CSS和我有以下的网站使用自举 CSS框架和FlexSlider jQuery插件，显示上的幻灯片：http://onofri.org/WP_BootStrap/如何使用CSS设置JQuery FlexSlider高度？

我有关于如何减少幻灯片高度以下的疑惑：如果使用萤火虫我减少最大高度的.flex视口高度的值，这一个：

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

我获得的S的高度hown immage区域减少到新值（例如200 px）ok，但是现在我遇到了写在我的immages上的文本（由.flex-caption-text段落中的跨度表示）出现问题位置：

  <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字幕类的顶级物业

.flex字幕{ 位置的值：绝对; 右：8％; top：35％; }

这是一个很好的解决方案还是我可以有其他一些问题（可能在浏览器不同于FireFox）？

另一个疑惑是关系到一个萤火行为，事实上如果我做以下操作：

1）我改变最大高度的价值in.flex-viewportin这样：

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

正如我说幻灯片immages区域的唤起注意是

2减小）我突出单个幻灯片的内容把鼠标光标在这个HTML行：

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

在这种情况下，FireBug以蓝色显示此区域的高度，在我看来，它具有与旧容器相同的高度（2000px），为什么？

TNX

安德烈

来源

2014-01-23 AndreaNobili

相反的.flex视口的值更改为最大高度：200像素;高度的

变化值.flexslider .slides IMG在flexslider.css文件为如：

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

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

写

来源

2014-07-17 11:57:25 Abin

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

回答

相关问题