如何在匹配基线时左右对齐两个不同大小的文本？

I am trying to change how the title and tagline are displayed in the Coraline WordPress theme. I want them next to each other, aligned on their baseline, justified left and right. I'm new to CSS.

我试图改变标题和标语在Coraline WordPress主题中的显示方式。我希望它们彼此相邻，在基线上对齐，左右对齐。我是CSS的新手。

I managed to figure out a solution, but it doesn't seem to work in Safari 8. What is a robust alternative that works in recent versions of all major browsers?

我设法找到了一个解决方案，但它似乎在Safari 8中不起作用。什么是在所有主流浏览器的最新版本中都有效的强大替代方案？

This is my attempt that works in Chrome and Firefox:

这是我在Chrome和Firefox中运行的尝试：

#container {
  width: 400px;
  background: #eee;
  /* This below is the key, doesn't work in Safari 8 */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#title {
  font-size: 32pt;
  background: #aee;
}

#tagline {
  font-size: 12pt;
  background: #eea;
}

<div id="container">
  <div id="title">Site Title</div>
  <div id="tagline">This is the tagline</div>
</div>

1 个解决方案

#1

Safari currently only supports flex with prefix.

Safari目前仅支持带前缀的flex。

#container {
  display: -webkit-flex; /*new*/
  display: flex;
  -webkit-justify-content: space-between; /*new*/
  justify-content: space-between;
  -webkit-align-items: baseline; /*new*/
  align-items: baseline;
}

Updated demo:

更新的演示：

#container {
  width: 400px;
  background: #eee;
  /* This below is the key, doesn't work in Safari 8
     Edit, added -webkit-* prefix */
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: baseline;
  align-items: baseline;
}

#title {
  font-size: 32pt;
  background: #aee;
}

#tagline {
  font-size: 12pt;
  background: #eea;
}

<div id="container">
  <div id="title">Site Title</div>
  <div id="tagline">This is the tagline</div>
</div>

Alternatively, you could use inline-block with some tricks as follows.

或者，你可以使用内联块和一些技巧，如下所示。

#container {
  width: 400px;
  background: #eee;
  text-align: justify;
  font-size: 0; /*fix for white space*/
}

#container:after{
  content: "";
  width: 100%;
  display: inline-block;
}

#title, #tagline {
  display: inline-block;
  vertical-align: bottom;
}

#title {
  font-size: 32pt;
  background: #aee;
}

#tagline {
  font-size: 12pt;
  background: #eea;
}

<div id="container">
  <div id="title">Site Title</div>
  <div id="tagline">This is the tagline</div>
</div>

#1