间隙属性的替代品

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: .5remh1

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>