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; 
    }