如何使用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高度？

回答

相關問題