Html 我使用的是砖石结构，它没有给容器适当的高度，这就是为什么里面的瓷砖放错地方了_Html_Css_Jquery Masonry

Html 我使用的是砖石结构，它没有给容器适当的高度，这就是为什么里面的瓷砖放错地方了

html css

Html 我使用的是砖石结构，它没有给容器适当的高度，这就是为什么里面的瓷砖放错地方了,html,css,jquery-masonry,Html,Css,Jquery Masonry,我使用Mashise来显示内容，mashise.desandro.com，问题是它没有为容器提供适当的高度，就像你知道的那样，Mashise动态地为容器提供高度，为内部项目提供边距样式，但它没有按应有的方式工作。这是砖石结构 $(function(){ $('#ItemContainer').masonry({ // options itemSelector : '.item' }); }); 这是我的html框架 <htm

我使用Mashise来显示内容，mashise.desandro.com，问题是它没有为容器提供适当的高度，就像你知道的那样，Mashise动态地为容器提供高度，为内部项目提供边距样式，但它没有按应有的方式工作。这是砖石结构

$(function(){
      $('#ItemContainer').masonry({
        // options
        itemSelector : '.item'
      });
    });

这是我的html框架

<html><body>
<div id="content">
  <ul id="ItemContainer">
    <li class="item">here li content with block style</li>
    ....more li's
  </ul>
</div>
</body></html>



这里li内容采用块样式
……更多李的

但是当我为每个li设置高度时，它工作得很好，但是其中的图像可以有任何高度，所以我必须在auto上保持其高度。第二行项目在第一行重叠到第一行的一半，第三行重叠到第二行，依此类推……每次给项目容器426px的高度

这里我上传了我的代码。。。www.testingmycode.comuv.com/raw2.html…请结帐。它显示不需要的行为，按重新加载，瓷砖的排列方式与MS windows中的纸牌游戏类似，当您调整窗口大小时，瓷砖的排列方式正确…按浏览器的重新加载按钮2-3次，调整窗口大小即可看到它们。请结账。

我想这是清理div的问题

将此代码放在代码中的某些位置并检查

<div style="clear:both"></div>

如果您在某个地方使用了float，则通常会发生这种情况，并且一旦您将其放入，它将正常工作

我看不到您的代码，但您必须使用

imagesLoaded（）

方法

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});

阅读介绍页面，确保您的设置使用了他们推荐的列宽等做法：@BillyMoat此处我已上传了我的代码。。。请结账。它显示不需要的行为，按重新加载，瓷砖的排列方式与MS windows中的纸牌游戏类似，当您调整窗口大小时，瓷砖的排列方式正确…按重新加载，调整窗口大小以查看它们。请结帐。你确定你在你的内容中添加了代码，在内容之外，在ul内部，在ul的末尾以及所有这些？？？@klrA这里我已经上传了我的代码。。。testingmycode.comuv.com/rough2.html请结帐。它显示不需要的行为，按重新加载，瓷砖的排列方式与MS windows中的纸牌游戏类似，当您调整窗口大小时，瓷砖的排列方式正确…按重新加载，调整窗口大小以查看它们。请检查我也有类似的问题。这似乎对我很有效。谢谢是的，为我工作。您可能需要使用图像标记两次。例如，如果您通过ajax加载图像，您还需要等待这些图像完全加载。这并不能解决问题。我们有所有需要的元素和图像加载。问题是LI元素中的所有元素，包括LI元素本身，都具有“auto”作为其高度属性。这使得javascript无法访问高度。