Question

我正在尝试创建一个博客页面，该页面显示每个博客的缩略图，标题，日期和类别。由于博客标题不同，这些元素无法正确排列。理想情况下，我希望日期，类别和阅读更多按钮与相邻的博客列表水平对齐。但是，如果不可能的话，我也将只阅读更多的按钮在底部对齐。我已附上一张图片以显示未对准。

<div class="flex-container">
  <article>
    <img />
    <h2>title</h2>
    <p>date</p>
    <p>category 1, category 2</p>
    <a>read more</a>
  </article>
</div>

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

article {
  width: 50%;

}

image showing elements not lining up properly due to one long blog title

Answer 1

也使article元素具有柔韧性，然后通过为margin:auto应用margin-bottom: auto来简单地将h2的“魔力”与flexbox结合使用： / p>

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

article {
  display: flex;
  flex-direction: column;
  width: 50%;
}

article h2 {
  margin-bottom: auto;
}

<div class="flex-container">
  <article>
    <img />
    <h2>title</h2>
    <p>date</p>
    <p>category 1, category 2</p>
    <a>read more</a>
  </article>
  <article>
    <img />
    <h2>really<br>long<br>title</h2>
    <p>date</p>
    <p>category 1, category 2</p>
    <a>read more</a>
  </article>
</div>

Answer 2

在标题中添加class="title"

<h2 class="title">title</h2>

添加CSS将标题限制为仅2行

.title {
  display: -webkit-box;
  -webkit-line-clamp: 2; //you can change as per need
  -webkit-box-orient: vertical; 
 text-overflow: ellipsis;
}

Ref

博客标题长度不同时如何使用flexbox排列元素

2 个答案: