CarouFREDsel 过滤器/CSS 问题答案

【问题标题】：CarouFREDsel filter / CSS issueCarouFREDsel 过滤器/CSS 问题
【发布时间】：2013-02-04 18:58:50
【问题描述】：

我在响应式（html5 样板）布局中使用 carouFREDsel jQuery carousel 插件。因此可见项的大小确实会发生变化。

我的 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>

我正在使用样式为“clear: both”的最后一个 DIV，以确保 .portfolio-right 缩小到它的内容（它有一个围绕轮播中可见项目的边框）。

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

基本上我的问题是过滤器选项不起作用，无论是类还是 :visible 选择器。因此，样式为“clear:both”的最终 DIV 会出现在分页中。

我是否遗漏了什么，是否有解决方法？

【问题讨论】：

标签： jquery css caroufredsel

【解决方案1】：

如果您使用的是 HTML5 样板，有一个方便的内置 float clear 辅助类 .clearfix。

您只需将 .clearfix 应用于具有浮动元素的容器。这是样板中的类和 cmets：

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

【讨论】：