css - 差距属性(property)的替代品

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 等流行的浏览器未能实现对与 display:flex 布局结合使用的 gap 的支持。

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

Answer 1

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

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>