砌体柱宽 %

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 是 'post-container .2'，则两个 'post-container' 不会一起滑动。但是，如果我先 post 两个 'post-container'，然后 'post-container .2' 它们就会一起滑动。通过搜索互联网，我发现它与砖石 ColumnWidth 有关。我尝试了许多不同的选择，但无济于事。将 ColumnWidth 设置为 '.post-container' 至少不会奏效。如果第一个 post 是 '.post-container .w2'，尽管以下所有 post 都是 50%（'post-container' ).

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

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

最好的，艾伦

Answer 1

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

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

您必须删除第一个 class 和第二个 class 之间的 space。否则，您指的是 html 中 class 内的 class。所以：

<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

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

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

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

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

砌体柱宽 %

Masonry ColumnWidth %

css

width

percentage

masonry