砌体留下空白/间隙答案

【问题标题】：Masonry Leaving Whitespaces/Gaps砌体留下空白/间隙
【发布时间】：2016-06-12 08:03:51
【问题描述】：

使用 masonry.js，它被导轨填充，但到处都留下了空隙，我尝试了两种布局，图片和相应的代码如下。我怎样才能摆脱红色箭头指示的空隙.Research 指出它可能不会一直打包，我应该使用打包工具，但是我已经看到了像这里 Example

这样填满整个网站的砌体示例

布局 1

布局1代码

HTML

<div id="restaurants">

      <%@restaurant.each do |f| %>

          <div class="box">

            <%= image_tag f.thumbnail.url(:medium)%>
          </div>

      <% end %>
  </div>

Javascript

$(window).load(function(){
   $('#restaurants').masonry({
        itemSelector: '.box',
       gutter: 0,
       columnWidth: 1



    });
});

CSS

.box {
  height: 320px;
  width: 320px;
  margin: 0;
}

布局2（我更喜欢）

所有的代码都是一样的，只是css只是

.box { 
  margin: 0;
}

【问题讨论】：

您提供的图像高度和宽度高度是多少..尝试给宽度 :100% 和高度 100% 以适合框
@NagaSaiA 谢谢，我试过你的方法，但没有改变布局
您是否观察到宽度和高度为 100% 的任何变化？
@NagaSaiA 是的，图像被拉伸并且看起来扭曲了，盒子也变大了，但是在布局 1 和上面的布局 2 图像中看到的右侧仍有空间
我的回答帮助了你的问题:)

标签： javascript html ruby-on-rails jquery-masonry masonry

【解决方案1】：

Padding : 0px 将解决您当前的问题，但对于窗口调整图像间隙，您需要考虑其他布局元素以使其具有响应性并使其适合框...

【讨论】：