在砌体布局中更改大尺寸的第一篇文章

Question

I am using Masonry to create layout with the width of size in each article is 50% but I want the first element has width of size is 100%. I use css is first-child but It does not make any effect. Here is HTML code:

<article class="item" position="absolute">..</article>
<article class="item" position="absolute">..</article>
<article class="item" position="absolute">..</article>
<article class="item" position="absolute">..</article>

Jquery:

var init_layout = function() {
    var c = $(".blog-masonry"),
        a = $(".masonry"),
        b = function() {
            c.masonry({
                itemSelector: ".item"
            })
        },
        d = function() {
            a.masonry({
                itemSelector: "article.item",
                isResizeBound: !1,
                isInitLayout: !1
            })
        };
    if (0 != c.size()) $(window).on("load", b);
    0 != a.size() && (b = function() {
        $("article.item", a).each(function() {
            $(this).height($(this).width());
            $(".tm-content-inner", this).height($(this).width())
        });
        a.masonry("layout")
    }, $(window).on("load", d), $(window).on("load", b), $(window).smartresize(b))
};
$(function() {
    init_layout()
});

Any help for me? Thank you so much for your attend.

Answer 1

There are examples of exactly this on the masonry site. You need another class '.item-wide' for example that styles that item to be 100% width. It's hard to tell without a proper jsfiddle or codepen example, but check out the masonry docs here