column-count将div的一部分移至下一列

时间:2018-12-29 10:26:43

标签: css flexbox css-grid masonry css-multicolumn-layout

我想建立一个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>תודו שאם לשים משקפיים ורודות אז שיהיו מקרונים. אז דלית ואני רקחנו לכם סדנא כתומה לכבוד טנקסגיבינג, עם פחזניות וסטיקי באנס ומלא הפתעות כתומות אחרות. ורק בשביל הפאן נגיע בפיג'מות, נדליק את האח ואם תהיו ילדים טובים נעשה לכם גם סיידר.&nbsp;אם כבר
          אז כבר.</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>

https://jsfiddle.net/idoangel/7ybz6nrs/29/

2 个答案:

答案 0 :(得分:2)

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>תודו שאם לשים משקפיים ורודות אז שיהיו מקרונים. אז דלית ואני רקחנו לכם סדנא כתומה לכבוד טנקסגיבינג, עם פחזניות וסטיקי באנס ומלא הפתעות כתומות אחרות. ורק בשביל הפאן נגיע בפיג'מות, נדליק את האח ואם תהיו ילדים טובים נעשה לכם גם סיידר.&nbsp;אם כבר
          אז כבר.</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>

答案 1 :(得分:0)

好的,所以这很简单。只需添加

.workshow {break-inside: avoid-column;}

它就像一种魅力!

此处更新了小提琴:https://jsfiddle.net/idoangel/7ybz6nrs/33/