0

ローカル開発中のサイトで isotope プラグインを使用しています。誰かが私を助けてくれることを望んでいるCSSの問題に遭遇しています。これが状況です。

<div class="wrapper"> //* Position is relative
   <div class="portfolio1">  //* Position is absolute
      <div class="inner-wrapper">
         <div class="portfolio-container">
            <div class="portfolio-header"></div>
            <div class="portfolio-content"></div>
            <div class="portfolio-footer">
                <div class="comments"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="portfolio2">  //* Position is absolute
      <div class="inner-wrapper">
         <div class="portfolio-container">
            <div class="portfolio-header"></div>
            <div class="portfolio-content"></div>
            <div class="portfolio-footer">
                <div class="comments"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="portfolio3">  //* Position is absolute
      <div class="inner-wrapper">
         <div class="portfolio-container">
            <div class="portfolio-header"></div>
            <div class="portfolio-content"></div>
            <div class="portfolio-footer">
                <div class="comments"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="portfolio4">  //* Position is absolute
      <div class="inner-wrapper">
         <div class="portfolio-container">
            <div class="portfolio-header"></div>
            <div class="portfolio-content"></div>
            <div class="portfolio-footer">
                <div class="comments"></div>
            </div>
         </div>
      </div>
   </div>
</div>

これにより、ポートフォリオ アイテムがほぼグリッド状に配置されます。私の問題は、コメントをインラインで追加するコメントシステムが内部にあることです。これが発生すると、「.portfolio」クラスがページの残りの項目の下にスライドします。この問題を解決できる css または jquery のいずれかを使用する方法はありますか? 要素を相対的に配置してフロートさせて、要素が下に流れないようにすることができることは理解していますが、それを行うとすぐに同位体プラグインが故障します。こちらも問題のスクリーンショットです。 スクリーンショット 乾杯、マイク

4

1 に答える 1

0

コメントはAjaxで挿入されていると思いますか？それらに別の位置に配置し、div 内に保持するためにオーバーライドできる CSS がいくつか添付されている可能性があります。

ただし、これには Isotope を使用しないでください。グリッドを作成するためだけにアイソトープを使用している場合は、それを行うためのより簡単な方法があります (使用する必要があるのは だけかもしれませんfloat)。Isotope はいくつかの非常に派手なフットワークを行い、ブラウザーごとに異なる方法で行い、適切で特定のサイズの要素で作業することを本当に好みます。コメントが JavaScript で追加されている場合、 Isotope と同じように div を変更すると、レイアウトのために物事を移動する方法を計算しようとすると、問題が発生します。

于 2012-11-18T18:13:08.250 に答える