缺口性质的替代方案

Question

我正在构建一个带有标题和副标题的简单布局。当两行可以不显示换行符而显示在一行上时，它们之间应留有少量间距。在所有其他情况下，标题和副标题应占据100％的宽度。副标题上不应没有margin-left。

我已经使用Flexbox和gap属性创建了这个。它可以在Firefox中正确呈现：

代码如下：

header {
  font-family: sans-serif;
  background-color: rebeccapurple;
  color: #fff;
  padding: 0 5px;
}

.container {
  max-width: 800px;
  width: 100%;
  flex-grow: 1;
  margin-left: auto;
  margin-right: auto;
}

header .container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.5rem;
  align-items: baseline;
}

<header>
  <div class="container">
    <h1>Long title for the page itself</h1>
    <h2>Subtitle</h2>
  </div>
</header>
<br />
<header>
  <div class="container">
    <h1>Shorter title</h1>
    <h2>Subtitle</h2>
  </div>
</header>

不幸的是，流行的浏览器（例如Google Chrome）未能实现对与gap布局结合使用的display: flex的支持。

有没有一种方法可以使用例如display: inline-block元素和负边距，以便它可以在Chrome和Internet Explorer等旧版浏览器中使用？

Answer 1

在gap: .5rem上使用margin-right: .5rem，而不是h1。

h1 {
  margin-right: .5rem;
}

.container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

header {
  font-family: sans-serif;
  background-color: rebeccapurple;
  color: #fff;
  padding: 0 5px;
}

<header>
  <div class="container">
    <h1>Long title for the page itself</h1>
    <h2>Subtitle</h2>
  </div>
</header>
<br />
<header>
  <div class="container">
    <h1>Shorter title</h1>
    <h2>Subtitle</h2>
  </div>
</header>