dane提出的问题 -coding

dane

Asked: 2023-08-19 06:43:00 +0800 CST

CSS 内联 Flex 和段落换行

9

如何让内联 Flex 换行到与多行标签的最后一行相同的行？我相信它看到了 100% 宽度的 h1 标签，因此它无法在其下方移动，但是有没有办法让它流到 h1 旁边的空白区域？

.post {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: 10px;
}

.post-title {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.post-meta {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

<div class="post">
  <h1 class="post-title"><a href="#">A Long Post Title but not too long to be obnoxious</a></h1>
  <div class="post-meta">
    <div class="post-date">11 November 2022</div>
    <div class="post-category"><a href="#">Writing, Religion</a></div>
  </div>
</div>

在必须换行到第二行的屏幕上，.post-meta 直接出现在后面的行上，而不是换行到文本旁边。

谢谢你！

Web Analytics