为什么我的网站失去了网格布局对齐。它用砖石制成 [英] Why my site lost its grid layout alignment. It's made with masonry

问题描述

我创建了一个图库页面。它显示具有可变高度的图像。正如

但是，突然间，我的网站失去了对齐。无法找出问题。

这可能是什么问题....请帮助我。在我的网站的一个大问题

这里是css对齐和masonry应用程序

  #body {background-color：＃1c4d5c; padding：10％0％20％20％;} 
 #imagesection 
 {
 margin：10px 10px 10px 10px; 
 float：left; 
 width：214px; 
 border：5px solid＃f0f0f0; 
 background-color：＃d2dbde; 
 border-radius：5px; 
} 
 
 var $ container = $（'＃body'）; 
 
 $ container.imagesLoaded（function（）{
 $ container.masonry（{
 itemSelector：'#imagesection'
}）; 
}） ; 
  

Masonry在IE 8中无法使用

注意：我我使用codeigniter，因此我在视图中加载头，主体，页脚等文件。

解决方案

尝试使用只需要的类masonry插件like .box .col2 ...

其他类可能会影响你的总对齐。

I created a gallery page. It displays images with variable heights. As suggested here to use a masonry plugin i used masonry plugin. It worked great till last night.

But this morning when i checked it again i lost the alignment. No alterations done to the site since past 3 days. Here is the snapshot.

Earlier, all div's are automatically adjusted(The marked spaces were eliminated) and the display looked like

http://pinterest.com/

But all of a sudden my site lost its alignment. Unable to figure out the issue.

What might be the issue .... Please help me. In a big problem with my site

Here are the css alignment and masonry application

#body {background-color:#1c4d5c;padding:10% 0% 20% 20%;}
#imagesection
{
margin:10px 10px 10px 10px;
float:left;
width:214px;
border: 5px solid #f0f0f0;
background-color:#d2dbde;
border-radius:5px;
}

var $container = $('#body');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '#imagesection'
  });
});

Masonry doesn't work in IE 8

Note: I am using codeigniter, Hence i am loading header, body, footer etc files in view.

解决方案

Try to use only required class from masonry plugin like .box .col2 ...

Other classes might effect your total alignment..

这篇关于为什么我的网站失去了网格布局对齐。它用砖石制成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！