1

レスポンシブ（html5ボイラープレート）レイアウトでcarouFREDseljQueryカルーセルプラグインを使用しています。したがって、表示されるアイテムのサイズは変わります。

私の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>

.portfolio-rightがその内容に縮小されるように、スタイル「clear：both」の最後のDIVを使用しています（カルーセルで表示されているアイテムを囲む境界線があります）。

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がページネーションに表示されます。

私は何かが足りないのですか、そしておそらく回避策はありますか？

4

1 に答える 1

1

HTML5 ボイラープレートを使用している場合は、便利な組み込み float clear ヘルパー クラスがあり.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;
    }
于 2013-02-04T10:58:50.560 に答える