欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

列計數將div的一部分移動到下一列

CSS
夏志豪2年前7瀏覽0評論

我想建立一個2列砌體網格。我嘗試使用列計數，但如果你看最后一個網格項目-文本被分割到下一列的原因。當我嘗試使用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 ><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 >???? ????? ?? ???? ????</a></h3>
      <p>???? ??????: 1
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>???? ??? ???? ??????? ?????? ?? ????? ???????. ?? ???? ???? ????? ??? ???? ????? ????? ??????????, ?? ??????? ?????? ???? ???? ?????? ?????? ?????. ??? ????? ???? ???? ????'???, ????? ?? ??? ??? ???? ????? ????? ???? ??? ?? ?????.&nbsp;?? ???
          ?? ???.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >????? ??? ??? ?? ??? ???</a></h3>
      <p>???? ??????: 2
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>???? ???-??? ??? ????? ????????? ??? ??? ????. ????? ??????? ???? ????? ????, ?????, ???? ????????? ???? ???? ??? ???????? ?????? ????? ???, ?? ??????? ???? ??????? ?????. ??????? ????? ???? ?????? ?????? ????.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >????? ????? ?????? ?? ???? ???????</a></h3>
      <p>???? ??????:
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>??? ??????? ?? ??? ???? ??? ????? ?? ?????, ????? ??????. ??? ???? ?????? ???? ?????? ??? ??????. ??????? ?? ??? ???? ?????? ???? ????? ????? ????? ???? ?? ????? ???????? ??????? ?? ???. ??? ?????? ??????????, ??????, ????? ?????? ??? ???.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >????? ???? ??????? ???? ?? ???? ???</a></h3>
      <p>???? ??????: 1
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>???? ???-??? ??? ????? ????????? ??? ??? ????. ????? ??????? ???? ????? ????, ?????, ???? ????????? ???? ???? ??? ???????? ?????? ????? ???, ?? ??????? ???? ??????? ?????. ??????? ????? ???? ?????? ?????? ????.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >??? ???? ??????</a></h3>
      <p>???? ??????: 3
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>???? ??? ??? ??? ??????? ????? ????. ??? ???? ?? ???? ??? ????? ?????? ?????? ??????? ?????? ??? ???? ???? ??? ???? ?????, ?? ?????? ??? ???????? ???. ??? ?? ????? ????????, ???? ??????? ?????? ????? ??? ???? ????? ????? ??? ?????? ????? ?? ????
          ??????? ?????? ??????.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >????? ?????? ????? ?? ???? ?????????</a></h3>
      <p>???? ??????: 3
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>???? ???-??? ??? ????? ????????? ??? ??? ????. ????? ??????? ???? ????? ????, ?????, ???? ????????? ???? ???? ??? ???????? ?????? ????? ???, ?? ??????? ???? ??????? ?????. ??????? ????? ???? ?????? ?????? ????.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >???? ???? ??????? ?????</a></h3>
      <p>???? ??????: 1
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <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 ><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 >???? ????? ?? ???? ????</a></h3>
      <p>???? ??????: 1
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>???? ??? ???? ??????? ?????? ?? ????? ???????. ?? ???? ???? ????? ??? ???? ????? ????? ??????????, ?? ??????? ?????? ???? ???? ?????? ?????? ?????. ??? ????? ???? ???? ????'???, ????? ?? ??? ??? ???? ????? ????? ???? ??? ?? ?????.&nbsp;?? ???
          ?? ???.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >????? ??? ??? ?? ??? ???</a></h3>
      <p>???? ??????: 2
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>???? ???-??? ??? ????? ????????? ??? ??? ????. ????? ??????? ???? ????? ????, ?????, ???? ????????? ???? ???? ??? ???????? ?????? ????? ???, ?? ??????? ???? ??????? ?????. ??????? ????? ???? ?????? ?????? ????.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >????? ????? ?????? ?? ???? ???????</a></h3>
      <p>???? ??????:
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>??? ??????? ?? ??? ???? ??? ????? ?? ?????, ????? ??????. ??? ???? ?????? ???? ?????? ??? ??????. ??????? ?? ??? ???? ?????? ???? ????? ????? ????? ???? ?? ????? ???????? ??????? ?? ???. ??? ?????? ??????????, ??????, ????? ?????? ??? ???.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >????? ???? ??????? ???? ?? ???? ???</a></h3>
      <p>???? ??????: 1
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>???? ???-??? ??? ????? ????????? ??? ??? ????. ????? ??????? ???? ????? ????, ?????, ???? ????????? ???? ???? ??? ???????? ?????? ????? ???, ?? ??????? ???? ??????? ?????. ??????? ????? ???? ?????? ?????? ????.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >??? ???? ??????</a></h3>
      <p>???? ??????: 3
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>???? ??? ??? ??? ??????? ????? ????. ??? ???? ?? ???? ??? ????? ?????? ?????? ??????? ?????? ??? ???? ???? ??? ???? ?????, ?? ?????? ??? ???????? ???. ??? ?? ????? ????????, ???? ??????? ?????? ????? ??? ???? ????? ????? ??? ?????? ????? ?? ????
          ??????? ?????? ??????.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >????? ?????? ????? ?? ???? ?????????</a></h3>
      <p>???? ??????: 3
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>???? ???-??? ??? ????? ????????? ??? ??? ????. ????? ??????? ???? ????? ????, ?????, ???? ????????? ???? ???? ??? ???????? ?????? ????? ???, ?? ??????? ???? ??????? ?????. ??????? ????? ???? ?????? ?????? ????.</p>
      </a>
    </div>
  </div>

  <div class="workshop">
    <div class="workshop-img">
      <a ><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 >???? ???? ??????? ?????</a></h3>
      <p>???? ??????: 1
      </p>
    </div>
    <div class="workshop-promo">
      <a >
        <p>???? ???-??? ??? ????? ????????? ??? ??? ????. ????? ??????? ???? ????? ????, ?????, ???? ????????? ???? ???? ??? ???????? ?????? ????? ???, ?? ??????? ???? ??????? ?????. ??????? ????? ???? ?????? ?????? ????.</p>
      </a>
    </div>
  </div>
  <!-- WPV_Infinite_Scroll -->



</div>

好吧，這很簡單。只是不得不補充

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

它非常有效！

更新小提琴在這里:https://jsfiddle.net/idoangel/7ybz6nrs/33/

我不得不在集裝箱里的物品上設置突破口

參見https://stackoverflow.com/a/76474266/5985680