砌体柱宽 %

Question

我希望有人可以帮助我。我已经做了好几个小时了，但我似乎无法修复它（我是 $%#@! 业余爱好者）。我一直在尝试让砌体使用不同的宽度尺寸。大小以 % 为单位。我正在自定义一个 Wordpress 主题，所以我正在处理一个预编码的砌体文件和预编码的 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 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”不会滑到一起。但是，如果我先发布两个“后容器”，然后再发布“后容器 .2”，它们确实会滑动在一起。 通过搜索互联网，我收集到它与砌体 ColumnWidth 有关。我尝试了许多不同的选择，但无济于事。将 ColumnWidth 设置为 '.post-container' 至少不会起到作用。如果第一个帖子是“.post-container .w2”，尽管后面的所有帖子都是 50%（“post-container”），砌体似乎总是使用 100% 的宽度。

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

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

最好， 艾伦

Answer 1

在 CSS 中引用具有多个类的 div 的正确方法是：

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

你必须删除第一类和第二类之间的空间。否则，您指的是 html 中的类中的类。所以：

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

希望能解决你的问题

Answer 2

如果未设置 columnWidth，Masonry 将使用第一个元素的外部宽度。

这解释了为什么每个元素都在新行中，它们都有 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%;
}