1

angularでサイトを構築しています。メイン ページと検索結果ページにはピンタレストのようなレシピ フィードがあり、jQuery isotopeプラグインとangular-isotopeディレクティブを使用していますが、2 つの問題があります。

メイン ページでは、グリッド セルの幅が固定されていないため、min-width CSS プロパティを使用します。

これは私のCSSです：

.recipe {
    width: $grid-width;
    min-height: 325px;
    height: auto;
    margin: $margin-top 0 $margin-bottom $ditter;
    float: left;
    position: relative;

    border: 1px solid #C3C3C3;
    @include border-radius(0 0 5px 5px);

    .avatar {
        position: absolute;
        top: -15px;
        width: $grid-width;
        margin: 0 auto;
        img {
            display: block;
            margin: 0 auto;
        }
    }

    .image {
        width: $grid-width - 2px;
        margin: 0 auto;
        overflow-x: hidden;
        img {
            width: $grid-width;
            margin: 0 auto;
        }
    }

    .name {
        font-family: Times;
        font-size: 20px;
        font-style: italic;
        font-weight: bold;
        text-align: center;
    }

    .recipe-controls {
        width: $grid-width;
        .star {
            font-size: 30px;
            margin: 15px;
        }
    }
}

これは私のAngularテンプレートです:

<div id="masonry" class="clearfix" isotope-container>
  <div isotope-item>
    ...
  </div>

  <div class="controls" isotope-item>
    ...
  </div>

  <div class="recipe" ng-repeat="recipe in recipes" isotope-item>
    <div class="avatar text-center">
        <a href="">
            <img class="img-circle" ng-src="http://graph.facebook.com/bruno.egermano/picture?type=normal" alt="">
        </a>
    </div>
    <div class="image">
        <a href="" ng-click="openRecipe(recipe.id)">
            <img ng-src="{{recipe.image}}" alt="{{recipe.name}}">
        </a>
    </div>
    <div class="name">
        <a href="" ng-click="openRecipe(recipe.id)">{{recipe.name}}</a>
    </div>
    <div class="recipe-controls">
        <i class="glyphicon  pull-right star" ng-class="{'glyphicon-star-empty': !recipe.star.stared, 'glyphicon-star': recipe.star.stared}">
            {{recipe.star.count}}
        </i>
    </div>
  </div>

それが私のスクリーンショットです。円は私が得た問題です。 同位体問題1

この最初の問題で。私は何を間違っていますか？

2番目の問題は、検索結果ページにフィルターがあり、ユーザーがフィルターの1つを変更すると、ajaxリクエストを呼び出してコレクションをリロードします。

それが発生すると、同位体は次のようにすべてのアイテムを互いに配置します。 スクリーンショット 2013 年 9 月 12 日 14 38 55

SCSS は同じで、HTML は他の問題とよく似ています。

4

1 に答える 1

1

最初の問題で間違いを見つけました。

画像とコンテナの高さを設定するのを忘れていました。

今、私の SCSS は次のようになります。

.recipe {
    width: $grid-width;
    height: auto;
    margin: $margin-top 0 $margin-bottom $ditter;
    float: left;
    position: relative;

    border: 1px solid #C3C3C3;
    @include border-radius(0 0 5px 5px);

    .avatar {
        position: absolute;
        top: -15px;
        width: $grid-width;
        margin: 0 auto;
        img {
            display: block;
            margin: 0 auto;
        }
    }

    .image {
        width: $grid-width - 2px;
        height: 235px;
        margin: 0 auto;
        overflow-x: hidden;
        img {
            width: $grid-width;
            margin: 0 auto;
        }
    }

    .name {
        font-family: Times;
        font-size: 20px;
        font-style: italic;
        font-weight: bold;
        text-align: center;
    }

    .recipe-controls {
        width: $grid-width;
        .star {
            font-size: 30px;
            margin: 15px;
        }
    }
}

しかし、2 つ目の問題はまだ発生しています。

于 2013-09-12T20:59:47.097 に答える