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

Question

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

我想出了一个解决方案，但它似乎在 Safari 8 中不起作用。在所有主流浏览器的最新版本中都可以使用的可靠替代方案是什么？

这是我在 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>

Answer 1

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;
}

更新的演示:

#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>

或者，您可以使用inline-block 和一些技巧，如下所示。

#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>