HTML 砌体布局问题 (asp.net)

Question

对于我的网站，我试图包括砌体以使内容布局得很好，但到目前为止我得到的结果非常奇怪。这是我的代码：

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm news-box" style="background-color:@color" 
     data-masonry='{ "columnWidth": ".masonry-container", "itemSelector": ".masonry-container" }'>
    <div class="masonry-container">
        <div class="contain">
            <img src="@w.Image" class="image img-responsive" />
            <div class="middle">
                @getReferrals(w.Id)
            </div>
        </div>
        <h4>@w.Title</h4>
        <p>@w.Body</p>
    </div>
</div>

如您所见，外部是具有砖石品质的。我没有使用 jquery 因为我无法让它工作，HTML 至少给了我（错误的）结果。无论如何，结果是这个神圣的混乱：

其他：此内容在 bootstrap 标签内。我在他们外面测试过，它工作得很好，但在里面却给我带来了问题。

如果可以请帮帮我！提前致谢....

Answer 1

无论何时使用砌体，只需确保将规则放在行级别并针对列，否则布局将很奇怪。

HTML 砌体布局问题 (asp.net)

HTML masonry layout issues (asp.net)

html

css

asp.net

layout

masonry