在 em 中具有流体边缘的砌体容器答案

【问题标题】：Masonry container with fluid margins in em在 em 中具有流体边缘的砌体容器
【发布时间】：2011-11-10 19:02:28
【问题描述】：

我正在尝试使我的 jQuery Masonry 墙的宽度与伪流体布局上的标题相同。见http://blart-philip.com

我找不到路。

我的 CSS 代码 width: 51em; 在元素级别被砌体 JS 覆盖，使其始终相对于 article#content 容器。

可以做什么？

这是我的 JS 代码：

// remap jQuery to $
(function($){})(window.jQuery);

/* Masonery for the index page */

var $container = $('.wall');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.brique',
    columnWidth : 150,
    isAnimated: true,
    isFitWidth: true
  });

});

有什么建议吗？

谢谢

拍拍

【问题讨论】：

您的重映射代码什么也不做，仅供参考

标签： jquery jquery-masonry

【解决方案1】：

如果宽度相同，每个元素的宽度必须是墙和页眉的倍数。这就是 columnWidth 的含义。

【讨论】：

Jitamaro，我不太明白你在这里的评论。我将columnWidth值更改为gutterWidth。
这意味着砌体将项目垂直而不是水平排列，并且可能无法使容器的宽度与标题的宽度相同。
玩转浏览器窗口大小，你会更明白我的意思。
内容被调整大小，这正是我写的，当你改变垂直宽度时，砌体将垂直排列砖块。你必须给父容器一个固定的宽度，并且列宽是容器宽度的倍数。