css - masonry 柱宽 %

Question

我希望有人能帮助我。我已经研究了好几个小时了，但我似乎无法修复它(我是 $%#@! 业余爱好者)。我一直在尝试让 masonry 使用不同的宽度尺寸。大小以百分比表示。我正在定制一个 Wordpress 主题，所以我正在处理一个预编码的 masonry 文件和预编码的 css。

css 和 html 基本上归结为这样(如果您需要更多代码，请告诉我):

.posts {
    overflow: visible !important; 
    position: relative;
}

.post-container {
    width: 50%
    padding: 10px;
    overflow: hidden;
}

.post-container .w2 {
    width: 100%
    padding: 10px;
    overflow: hidden;
}

html:

<div class="posts">
    <div class="post-container w2>Post</div>
    <div class="post-container>Post</div>
    <div class="post-container>Post</div>
</div>

masonry :

//Masonry blocks
$blocks = $(".posts");

$blocks.imagesLoaded(function() {
    $blocks.masonry({
        itemSelector: '.post-container',
    });

    // Fade blocks in after images are ready (prevents jumping and re-rendering)
        $(".post-container").fadeIn();
    });

    $(document).ready( function() { setTimeout( function() { $blocks.masonry(); }, 500); });

    $(window).resize(function () {
        $blocks.masonry();
    });

因此:如果第一个帖子是“po​​st-container .2”，则两个“post-container”不会一起滑动。但是，如果我先发布两个“post-container”，然后发布“post-container .2”，它们就会一起滑动。通过搜索互联网，我发现它与砖石 ColumnWidth 有关。我尝试了许多不同的选择，但无济于事。将 ColumnWidth 设置为 '.post-container' 至少不会奏效。如果第一个帖子是“.post-container .w2”，尽管以下所有帖子都是 50%(“post-container”)，但 masonry 似乎总是使用 100% 宽度。

我需要做什么才能拥有不同的 % 宽度，即使第一个是 100%？

我希望我不是太不清楚，但如果我不清楚，请告诉我，我会尽力解释得更好。感谢您花时间阅读本文。

最好的，艾伦

Answer 1

If columnWidth is not set, Masonry will use the outer width of the first element.

这解释了为什么每个元素都在新行中，它们都有 100% 的宽度。

使用外部 CSS 类来设置列的大小很方便。如果您的元素有填充，设置 box-sizing: border-box; 也很重要。

在下面的演示中，我将 columnWidth 选项设置为 25% - 你可以在 .sizer CSS 类中调整它，例如你需要有 10元素并排 - 你必须将它设置为 10%。您当然可以“连接”列并在 CSS 中设置宽度为 50% 的两个元素。

演示: http://jsfiddle.net/Lob6mse1/2/

JavaScript:

$blocks = $(".posts");
$blocks.masonry({
    itemSelector: '.post-container',
    columnWidth: ".sizer"
});

HTML:

<div class="posts">
    <div class="sizer"></div>
    <div class="post-container w2">Post</div>
    <div class="post-container">Post</div>
    <div class="post-container">Post</div>
</div>

CSS:

.posts * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.posts {
    position: relative;
}

.post-container {
    width: 50%;
    min-height: 100px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #999;
}

.w2 {

    width: 100%;
    height: 100px;
    padding: 0;
    background-color: #EEE;
}

.sizer {
    box-sizing: border-box;
    width: 25%;
}