【发布时间】：2019-05-26 21:06:18
【问题描述】：
我想构建一个 2 列砌体网格。我尝试使用column-count，但如果您查看最后一个网格项 - 文本由于某种原因被拆分到下一列。当我尝试使用 flex 时，项目不会以砌体形式正确对齐。
.workshop {
width: 100% !important;
margin: 0 0 1rem 0 !important;
padding: 0 15px;
float: right;
}
.workshop-img {
position: relative;
overflow: hidden;
float: right;
width: 100%;
}
.workshop-date {
position: absolute;
top: 20px;
right: 0;
padding: 10px 15px;
background: white;
text-align: center;
border-radius: 20px 0 0 20px;
color: black;
}
.js-wpv-view-layout {
column-count: 2;
-webkit-column-count: 2;
column-gap: 15px;
-webkit-column-gap: 15px;
float: right;
width: 100%;
direction: rtl;
}
.workshop-title {
margin-top: 1rem;
}
.workshop-promo {
position: relative;
float: right;
margin-top: 1rem;
}
.workshop-promo p,
.workshop-promo a {
color: black;
text-align: justify;
}<div id="wpv-view-layout-10173" class="js-wpv-view-layout">
<!-- WPV_Infinite_Scroll -->
<!-- WPV_Infinite_Scroll_Insert -->
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90-%d7%9b%d7%aa%d7%95%d7%9e%d7%94-%d7%a2%d7%9d-%d7%93%d7%9c%d7%99%d7%aa-%d7%a7%d7%a4%d7%9c%d7%9f/"><img width="800" height="798" src="http://outofsite.co.il/liat/wp-content/uploads/2018/12/Dalit-kaplan-1.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
נובמבר, 2018
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90-%d7%9b%d7%aa%d7%95%d7%9e%d7%94-%d7%a2%d7%9d-%d7%93%d7%9c%d7%99%d7%aa-%d7%a7%d7%a4%d7%9c%d7%9f/">סדנא כתומה עם דלית קפלן</a></h3>
<p>מספר מפגשים: 1
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90-%d7%9b%d7%aa%d7%95%d7%9e%d7%94-%d7%a2%d7%9d-%d7%93%d7%9c%d7%99%d7%aa-%d7%a7%d7%a4%d7%9c%d7%9f/">
<p>תודו שאם לשים משקפיים ורודות אז שיהיו מקרונים. אז דלית ואני רקחנו לכם סדנא כתומה לכבוד טנקסגיבינג, עם פחזניות וסטיקי באנס ומלא הפתעות כתומות אחרות. ורק בשביל הפאן נגיע בפיג'מות, נדליק את האח ואם תהיו ילדים טובים נעשה לכם גם סיידר. אם כבר
אז כבר.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%a8%d7%95%d7%90-%d7%a4%d7%95%d7%93-%d7%a2%d7%9d-%d7%a0%d7%99%d7%a8-%d7%9c%d7%95%d7%99/"><img width="800" height="1200" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/8d18f3cf-6b0f-417c-9286-77aaf3f82c1a.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
ספטמבר, 2018
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%a8%d7%95%d7%90-%d7%a4%d7%95%d7%93-%d7%a2%d7%9d-%d7%a0%d7%99%d7%a8-%d7%9c%d7%95%d7%99/">בישול רוא פוד עם ניר לוי</a></h3>
<p>מספר מפגשים: 2
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%a8%d7%95%d7%90-%d7%a4%d7%95%d7%93-%d7%a2%d7%9d-%d7%a0%d7%99%d7%a8-%d7%9c%d7%95%d7%99/">
<p>מטבח הרו-פוד הוא חגיגה קולינארית בכל קנה מידה. המטבח מאופיין בשפע טעמים חיים, צבעים, יופי ויצירתיות והכי חשוב שכל המתכונים שנילמד בקורס הזה, הם מתכונים קלים ומהירים להכנה. מתאימים לאורח חיים מודרני והמהיר שלנו.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%91%d7%95%d7%9b%d7%a8%d7%99%d7%aa-%d7%a2%d7%9d-%d7%9e%d7%99%d7%a7%d7%94-%d7%a9%d7%9e%d7%a2%d7%95%d7%a0%d7%95%d7%91/"><img width="1200" height="799" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/Mika.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
מאי, 2018
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%91%d7%95%d7%9b%d7%a8%d7%99%d7%aa-%d7%a2%d7%9d-%d7%9e%d7%99%d7%a7%d7%94-%d7%a9%d7%9e%d7%a2%d7%95%d7%a0%d7%95%d7%91/">סדנאת בישול בוכרית עם מיקה שמעונוב</a></h3>
<p>מספר מפגשים:
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%91%d7%95%d7%9b%d7%a8%d7%99%d7%aa-%d7%a2%d7%9d-%d7%9e%d7%99%d7%a7%d7%94-%d7%a9%d7%9e%d7%a2%d7%95%d7%a0%d7%95%d7%91/">
<p>מסע קולינרי על דרך המשי הוא חוויה של ריחות, טעמים וצבעים. דרך המשי משתרעת מסין שבמזרח ועד טורקיה. המטבחים על דרך המשי הושפעו האחד מהשני ויצרו עירוב מרתק של טעמים ותרבויות ששזורות זו בזו. כבת לעולים מאוזבקיסטן, בשבילי, המטבח הבוכרי הוא בית.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%9d-%d7%9c%d7%a4%d7%a1%d7%97-%d7%a2%d7%9d-%d7%90%d7%9c%d7%95%d7%9f-%d7%a9%d7%91%d7%95/"><img width="1125" height="1126" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/IMG_9240.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
מרץ, 2018
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%9d-%d7%9c%d7%a4%d7%a1%d7%97-%d7%a2%d7%9d-%d7%90%d7%9c%d7%95%d7%9f-%d7%a9%d7%91%d7%95/">סדנאת אפיה קינוחים לפסח עם אלון שבו</a></h3>
<p>מספר מפגשים: 1
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%9d-%d7%9c%d7%a4%d7%a1%d7%97-%d7%a2%d7%9d-%d7%90%d7%9c%d7%95%d7%9f-%d7%a9%d7%91%d7%95/">
<p>מטבח הרו-פוד הוא חגיגה קולינארית בכל קנה מידה. המטבח מאופיין בשפע טעמים חיים, צבעים, יופי ויצירתיות והכי חשוב שכל המתכונים שנילמד בקורס הזה, הם מתכונים קלים ומהירים להכנה. מתאימים לאורח חיים מודרני והמהיר שלנו.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a2%d7%a8%d7%91-%d7%a8%d7%a4%d7%a8%d7%9d-%d7%95%d7%98%d7%95%d7%a0%d7%99%d7%a1/"><img width="800" height="715" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/43062098_2011117495575336_2225091791483305984_n-1.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
דצמבר, 2017
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a2%d7%a8%d7%91-%d7%a8%d7%a4%d7%a8%d7%9d-%d7%95%d7%98%d7%95%d7%a0%d7%99%d7%a1/">ערב רפרם וטוניס</a></h3>
<p>מספר מפגשים: 3
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a2%d7%a8%d7%91-%d7%a8%d7%a4%d7%a8%d7%9d-%d7%95%d7%98%d7%95%d7%a0%d7%99%d7%a1/">
<p>רפרם חדד הוא אמן ויזואלי וחוקר אוכל. הוא חוקר את הקשר בין קראפט לאמנות ותרבות עכשווית ובאוכל הוא עוסק בקשר בין אוכל יהודי, ים תיכוני וזה הביוגרפי שלו. הוא חי ועובד בתוניסיה, תורם מתכונים לספרים ובעבר עמד בראש תנועת סלואו פוד בישראל ולימד על אוכל
באקדמיה לאמנות בבצלאל.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7-%d7%a2%d7%9d-%d7%90%d7%a4%d7%a8%d7%aa-%d7%9c%d7%99%d7%91%d7%a4%d7%a8%d7%99%d7%95%d7%a0%d7%93/"><img width="1280" height="1106" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/1fb86d11-d893-46d2-b1f1-3d5e7f2dba25-1.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
נובמבר, 2017
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7-%d7%a2%d7%9d-%d7%90%d7%a4%d7%a8%d7%aa-%d7%9c%d7%99%d7%91%d7%a4%d7%a8%d7%99%d7%95%d7%a0%d7%93/">סדנאת קינוחי בוטיק עם אפרת ליבפריונד</a></h3>
<p>מספר מפגשים: 3
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7-%d7%a2%d7%9d-%d7%90%d7%a4%d7%a8%d7%aa-%d7%9c%d7%99%d7%91%d7%a4%d7%a8%d7%99%d7%95%d7%a0%d7%93/">
<p>מטבח הרו-פוד הוא חגיגה קולינארית בכל קנה מידה. המטבח מאופיין בשפע טעמים חיים, צבעים, יופי ויצירתיות והכי חשוב שכל המתכונים שנילמד בקורס הזה, הם מתכונים קלים ומהירים להכנה. מתאימים לאורח חיים מודרני והמהיר שלנו.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7/"><img width="800" height="1200" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/8d18f3cf-6b0f-417c-9286-77aaf3f82c1a.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
נובמבר, 2017
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7/">סדנת אפיה קינוחיי בוטיק</a></h3>
<p>מספר מפגשים: 1
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7/">
<p>מטבח הרו-פוד הוא חגיגה קולינארית בכל קנה מידה. המטבח מאופיין בשפע טעמים חיים, צבעים, יופי ויצירתיות והכי חשוב שכל המתכונים שנילמד בקורס הזה, הם מתכונים קלים ומהירים להכנה. מתאימים לאורח חיים מודרני והמהיר שלנו.</p>
</a>
</div>
</div>
<!-- WPV_Infinite_Scroll -->
</div>【问题讨论】：
-
你能再检查一下吗？我看不出最后一栏有什么问题
-
每一列下面都有一个图片和文字。最后一列（最右下角）的文本被推到下一列并且不会出现在图像下方...
标签： css flexbox css-grid masonry css-multicolumn-layout