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();
    });

所以：如果第一个帖子是'post-container .2'，那么两个'post-container'将不会一起滑动。如果我先发布两个'post-container'，然后发布'post-container .2'，它们会一起滑动。从搜索interwebs，我收集它与砌体ColumnWidth有关。我尝试了很多不同的选择，但无济于事。将ColumnWidth设置为'.post-container'至少不会做到这一点。如果第一个帖子是'.post-container .w2'，看起来砖石总是使用100％宽度，尽管以下所有帖子都是50％（'post-container'）。

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

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

最佳，艾伦

Answer 1

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

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

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

在下面的演示中，我将columnWidth选项设置为25％ - 您可以在.sizer CSS类中调整它，例如，如果您需要并排10个元素 - 你必须把它设置为10％。你当然可以＆＃34; connect＆＃34;列，并在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%;
}

Answer 2

在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>

我希望这能解决你的问题

砌体柱宽％

2 个答案: