column-count 将 div 的一部分移动到下一列
column-count moves part of div to next column
我想构建一个 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>
将 break-inside: avoid-column;
添加到 .workshop
。
.workshop {
width: 100% !important;
margin: 0 0 1rem 0 !important;
padding: 0 15px;
float: right;
break-inside: avoid-column;
}
.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>
好的,这有点简单。只需添加
.workshow {break-inside: avoid-column;}
而且效果非常好!
已更新 fiddle 此处:https://jsfiddle.net/idoangel/7ybz6nrs/33/
我想构建一个 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>
将 break-inside: avoid-column;
添加到 .workshop
。
.workshop {
width: 100% !important;
margin: 0 0 1rem 0 !important;
padding: 0 15px;
float: right;
break-inside: avoid-column;
}
.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>
好的,这有点简单。只需添加
.workshow {break-inside: avoid-column;}
而且效果非常好!
已更新 fiddle 此处:https://jsfiddle.net/idoangel/7ybz6nrs/33/