css - 同位素网格和内联 ajax 注释

Question

我在我的网站上使用同位素插件，该插件正在本地开发中。我遇到了一个 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 来解决这个问题？我知道您可以使用 relative 定位元素并将它们 float 以防止它们在下方运行，但是一旦您这样做，同位素插件就会崩溃。这也是问题的屏幕截图。 Screen Shot干杯，迈克

Answer 1

我猜评论是用 Ajax 插入的？也许有一些附加到它们的 CSS 可以被覆盖以不同地定位它们并将它们保持在它们的 div 中。

不过，您也不应该为此使用同位素。如果您使用同位素只是为了创建网格，则可以使用更简单的方法(您可能只需要使用 float)。 Isotope 做了一些非常花哨的步法，在不同的浏览器中以不同的方式做，并且非常喜欢处理具有漂亮的特定大小的元素。如果评论是用 javascript 添加的，同时更改 div，因为 Isotope 正在尝试计算它将如何移动布局的内容，那么您将遇到麻烦。