CarouFRedsel過濾器/ CSS問題

Question

我在響應式（html5樣板）佈局中使用carouFRedsel jQuery傳送帶插件。因此可見項目的大小確實發生了變化。

我的HTML如下：

<div class="portfolio-right"> 
    <div class="portfolio-img-container"> 
    <div class="portfolio-img"><img src="img/purple-ink-likes-1.jpg" /></div> 
    <div class="portfolio-img"><img src="img/purple-ink-likes-1.jpg" /></div> 
    <div class="portfolio-img"><img src="img/purple-ink-likes-1.jpg" /></div> 
    <div style="clear:both; visibility: hidden;"></div> 
    </div> 
</div> 

我使用的最後一個div風格「明確：既」，以確保.portfolio右縮小到它的內容（它具有圍繞邊界旋轉木馬中的可見物品）。

CSS：

div.portfolio-right 
{ 
    float: right; 
    width: 60%; 
    border: 8px solid #E6E6E9; 
} 

要麼我需要找到一種方法，使容器收縮到它的內容，否則，還是得到了一定的過濾項carouFREDsel工作（由於某種原因，我不能）。

$(".portfolio-img-container").carouFredSel({ 
circular : true, 
auto : false, 
responsive : true, 
scroll  : 1, 
items  : { 
    filter : ".portfolio-img", 
    visible  : 1, 
    width  : 200, 

}, 
    pagination: ".portfolio-img-pagination" 
}); 

基本上我的問題是過濾器選項將無法使用類或：可見選擇器。因此，在分頁中出現了帶有「clear：both」風格的最終DIV。

我是否錯過了一些東西，可能有解決方法嗎？

Answer 1

如果您使用的是HTML5樣板，則有一個方便的內置浮動清除輔助類.clearfix。

您只需將.clearfix應用於具有浮動元素的容器。以下是鍋爐板的課程和評論：

/* 
    * Clearfix: contain floats 
    * 
    * For modern browsers 
    * 1. The space content is one way to avoid an Opera bug when the 
    * `contenteditable` attribute is included anywhere else in the document. 
    * Otherwise it causes space to appear at the top and bottom of elements 
    * that receive the `clearfix` class. 
    * 2. The use of `table` rather than `block` is only necessary if using 
    * `:before` to contain the top-margins of child elements. 
    */ 

    .clearfix:before, 
    .clearfix:after { 
     content: " "; /* 1 */ 
     display: table; /* 2 */ 
    } 

    .clearfix:after { 
     clear: both; 
    }