Question

我在响应式（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"
});

基本上我的问题是过滤器选项无法使用类或：可见选择器。因此，最终的DIV风格“清晰：两者”出现在分页中。

我错过了什么，是否有解决方法？

Answer 1

如果您使用的是HTML5样板文件，则有一个方便的内置浮动清除助手类.clearfix。

您只需将.clearfix应用于具有浮动元素的容器即可。以下是Boilerplate的课程和评论：

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

CarouFREDsel过滤器/ CSS问题

1 个答案: