使用带有引导列的砌体时遇到的问题
我有一个新闻文章页面，我可以在这里指定文章的宽度：
<div class="<%# GetArticleSize(Item.ArticleSize) %>">
使用下列其中一项呈现框元素：
- col-lg-3 col-md-3 col-sm-3 col-xs-6（小尺寸）
- col-lg-6 col-md-6 col-sm-6 col-xs-6（半尺寸）
- col-xs-12（全尺寸）
如果所有的新闻文章都是col-sm-3，那么砌体布局效果很好（使用此链接HERE查看完美结果）..
当我将其中一篇新闻文章设为col-sm-6（半页大小）时，问题就出现了。
见图：
似乎它没有足够的空间容纳最后一个col-sm-3元素，它包裹在下面，并在所有其他新闻文章上创造一个奇怪的外观。
这是一个JSFIDDLE来说明代码..但是......这段代码可以正常工作和包装......
我不知道是什么造成了这个......也许你们其中一个人知道如何使这个正确吗？
更新!! 当我将砌体目标从容器更改为网格项目本身时，它至少跨越了整个宽度，但它太宽了。
$('.grid-item').masonry({
columnWidth: 200
});
<asp:ListView ID="lvArticles" runat="server" EnableViewState="False" ItemType="Servicelayer.Article" OnItemCommand="lvArticles_OnItemCommand" OnItemDataBound="lvArticles_OnItemDataBound">
<ItemTemplate>
<div class="grid-item <%# GetArticleSize(Item.ArticleSize) %>">
其中......呈现：
<div id="article-list" class="widget-container row">
<div class="grid-item widget-news widget-box col-lg-6 col-md-6 col-sm-6 col-xs-6" style="position: relative; height: 277.5px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible priority" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_0" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl0$lnkViewArticle','')">A-lagsjentene på oppdrag for CC Gjøvik</a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="article-image" src="http://127.0.0.1:10000/devstoreaccount1/images/125895ba-b174-4356-93f2-2371f1a84403logo_Deloitte.png">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 article-image-subtext">
Mari Finstad Bergum og Emma Fauchald
</div>
<p class="articletags"></p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="https://klubbweb.blob.core.windows.net/clubid21/81ae3567-3038-4299-9d91-8365ffef185bavatar24.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Marthe Godtlund Bråthen</p>
<p>19.09.2016 11:46</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item widget-news widget-box col-lg-3 col-md-3 col-sm-3 col-xs-6" style="position: relative; height: 493.5px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible priority" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_1" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl1$lnkViewArticle','')">NM-gull til ni Gjøvik HK-jenter!</a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="article-image" src="https://klubbweb.blob.core.windows.net/clubid21/da2d0d26-e00e-4b10-84db-76adf999ba6eIMG_6263.JPG">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 article-image-subtext">
Region Innlandet med ni Gjøvik HK-jenter kunne juble for gull i region-NM.
</div>
<p class="articletags">Tags: Region-Nm 2016, Nm-Gull, Nm-Gullvm-Gull, Nm-Gull, Nm-Gullvm-Gull</p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="https://klubbweb.blob.core.windows.net/clubid21/81ae3567-3038-4299-9d91-8365ffef185bavatar24.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Marthe Godtlund Bråthen</p>
<p>25.04.2016 17:45</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item widget-news widget-box col-lg-3 col-md-3 col-sm-3 col-xs-6" style="position: relative; height: 317px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_2" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl2$lnkViewArticle','')">Dokument nå da ? </a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="article-image" src="http://127.0.0.1:10000/devstoreaccount1/images/5695dc5d-c580-4cd2-94dd-4ab853539839bgyeah.jpg">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 article-image-subtext">
</div>
<div class="col-xs-12">
<a style="text-decoration: underline" target="_blank" class="article-text" href="http://127.0.0.1:10000/devstoreaccount1/images/6803c4b4-0c8c-4f20-a613-13ab72bf7ec7Hekk planter barlind bestilling.xlsx">Hekk planter barlind bestilling.xlsx</a>
</div>
<p class="articletags"></p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="http://127.0.0.1:10000/devstoreaccount1/images/875bcc1f-5d70-4d74-88bd-55deb482ec9favatar5.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Terje Nygård</p>
<p>31.03.2017 19:57</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item widget-news widget-box col-lg-3 col-md-3 col-sm-3 col-xs-6" style="position: relative; height: 159px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_3" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl3$lnkViewArticle','')">Dokument ? </a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><p class="articletags"></p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="http://127.0.0.1:10000/devstoreaccount1/images/875bcc1f-5d70-4d74-88bd-55deb482ec9favatar5.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Terje Nygård</p>
<p>31.03.2017 19:53</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item widget-news widget-box col-lg-3 col-md-3 col-sm-3 col-xs-6" style="position: relative; height: 326px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_4" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl4$lnkViewArticle','')">Test..</a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="article-image" src="http://127.0.0.1:10000/devstoreaccount1/images/a51d287c-d160-4ba4-9765-aae2cf185973boss.jpg">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 article-image-subtext">
Boss.
</div>
<p class="articletags"></p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="http://127.0.0.1:10000/devstoreaccount1/images/875bcc1f-5d70-4d74-88bd-55deb482ec9favatar5.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Terje Nygård</p>
<p>31.03.2017 19:51</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item widget-news widget-box col-lg-3 col-md-3 col-sm-3 col-xs-6" style="position: relative; height: 160px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_5" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl5$lnkViewArticle','')">Møtereferat ja</a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><div class="col-xs-12">
<a style="text-decoration: underline" target="_blank" class="article-text" href="http://127.0.0.1:10000/devstoreaccount1/images/987ceade-e6db-430b-84ac-c23e1194a3b1Håndball - Øvelser og program.docx"></a>
</div>
<p class="articletags"></p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="http://127.0.0.1:10000/devstoreaccount1/images/875bcc1f-5d70-4d74-88bd-55deb482ec9favatar5.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Terje Nygård</p>
<p>31.03.2017 18:44</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我最终得到的结果如下：
1 个答案:
答案 0 :(得分：0)
Masonry FAQ: The first item breaks the grid!
您很可能需要设置
columnWidthoption。如果没有设置columnWidth，Masonry将使用第一个项目的宽度作为其列的大小。
class->grade
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？