0

根据设计（附图），我遇到了垂直卡片位置的问题。首先，我尝试将它与flexbox属性一起定位，但似乎它不是正确的方式，因为它只是将元素移动到“自然流”中的下一行，但我不需要这种行为。最接近的解决方案是将column-count: 2属性设置news__items为父容器中的类，但在这种情况下我无法控制顺序。我觉得display: grid可以在这里提供帮助，但还不知道如何实现它。注意：图像具有相同的高度和宽度。

这是html和css标记：

.news__items {
  column-count: 2;
}
<div class="news__items">
  <div class="news__item">
    <img src="../img/dummy-news-image.png" alt="news">
    <div class="news__item-content">
      <h2 class="news__primary-title">Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
        nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
    </div>
  </div>
  <div class="news__item">
    <img src="../img/dummy-news-image.png" alt="news">
    <div class="news__item-content">
      <h3>Lorem ipsum</h3>
      <h2 class="news__secondary-title">Lorem ipsum dolor
      </h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
        nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
    </div>
  </div>
  <div class="news__item">
    <img src="../img/dummy-news-image.png" alt="news">
    <div class="news__item-content">
      <h3>Lorem ipsum</h3>
      <h2 class="news__secondary-title">Lorem ipsum dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
        nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
    </div>
  </div>
  <div class="news__item">
    <img src="../img/dummy-news-image.png" alt="news">
    <div class="news__item-content">
      <h3>Lorem ipsum</h3>
      <h2 class="news__secondary-title">MFF in the News</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
        nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
    </div>
  </div>
  <div class="news__item">
    <img src="../img/dummy-news-image.png" alt="news">
    <div class="news__item-content">
      <h3>Lorem ipsum</h3>
      <h2 class="news__secondary-title">Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
        nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
    </div>
  </div>
</div>

在此处输入图像描述

实施此类网格的最佳方法是什么？

4

1 回答 1

0

试试这个解决方案。

.news__items {
  display: table;
}
.news__item {
  width: 50%;
  float: left;
}
于 2020-10-24T14:15:56.607 回答