結合jQuery Cycle（Lite）和液體佈局

這一直在推動我一段時間的堅果 - 我想結合jQuery Cycle Lite plugin與簡單的液體佈局。結合jQuery Cycle（Lite）和液體佈局

我的問題是幻燈片下面的內容消失在它下面 - 當幻燈片JS是活動的，看起來包含幻燈片的div具有0px的高度。如果我刪除了幻燈片代碼（並且僅使用靜態圖像），則div會被其中的圖像推到正確的高度。

由於幻燈片本身會隨着液體佈局而縮放，我無法爲幻燈片指定px高度。任何人都可以提出一個解決方法？

代碼在下面，但它可能有助於查看我在http://jsbin.com/ubufi5/edit處理過的示例。

感謝您的閱讀！

HTML/CSS：

<head> 
    <meta charset="utf-8" /> 
    <title>Slideshow in a liquid layout</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://misc.somnambulist.org/jquery.cycle.lite.1.0.js"></script> 

    <style type="text/css"> 
    body { max-width: 1120px; margin: 100px auto; border: 1px solid #ff0; background: #666;} 
    body img { width: 100%; } 
    </style> 
</head> 
<body id="home"> 
    <h1>Test</h1> 
    <div id="slidebox"> 
    <img src="http://misc.somnambulist.org/test2.jpg" /> 
    <img src="http://misc.somnambulist.org/test4.jpg" /> 
    </div> 
    <h2>Lots of text here so it clears the image</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</body> 
</html>

JS：

$(function() { 
    $('#slidebox').cycle(); 
});

來源

2011-02-25 poisontofu

body { 
overflow: auto; 
min-height: 100%; 
}

來源

2011-02-25 12:40:56 benhowdle89

不能修復它，不幸的是 - 這裏是[我加入CSS的示例]（http://jsbin.com/ubufi5/2/）。 – poisontofu 2011-02-25 12:47:08

我已經使用解決了這個下面的jQuery它會檢查最高的圖像上加載和維護的高度#slidebox div當窗口被調整大小時（example here），但我打算讓這個問題暫時打開一段時間，希望有一些gobsmackingly基本的CSS東西我已經以某種方式覆蓋或者至少解釋爲什麼我遇到這個問題。

function SetHeightToTallestChild(i) { 
    var tallest = 0; 
    $(i).children().each(function(){ 
    var h = $(this).height(); 
    if(h > tallest) 
     tallest = h; 
    }); 
    $(i).height(tallest); 
} 

$(document).ready(function() { 
    SetHeightToTallestChild('#slidebox'); 
    $(function() { 
     $('#slidebox').cycle(); 
    }); 
    $(window).resize(function() { 
    SetHeightToTallestChild('#slidebox'); 
    }); 
});

來源

2011-02-25 14:11:38 poisontofu

結合jQuery Cycle（Lite）和液體佈局

回答

相關問題