将 div 与另一个 div 的第一行的基线对齐？答案

【问题标题】：Aligning div to baseline of the first line of another div?将 div 与另一个 div 的第一行的基线对齐？
【发布时间】：2018-07-21 10:05:03
【问题描述】：

我有两个 div，想要对齐它们的基线。但是，其中一个 div 有不止一行文本和一些嵌入内容，虽然我想将它们与顶部基线对齐，但浏览器似乎与底部基线对齐。

我已经构建了一个 JSFiddle here 来说明，使用以下 HTML：

<div style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
    Here's <div class='embedded'></div> an embedded div and more text
</div>

和 CSS：

.embedded {
    width:40px;
    height:40px;
    display:inline-block;
    vertical-align:-15px;
    border:1px solid black;
}

我想要的是这个：

我得到的是这样的：

纯 CSS 解决方案会很好，但我也不反对在这里使用 JavaScript。任何帮助将不胜感激！

【问题讨论】：

标签： css vertical-alignment baseline

【解决方案1】：

This will solve your issue:    
 `<div style="display: flex;">
      <div style="padding-top: 13px;">NOTE: &nbsp;</div>
      <div>
        <p style="display:inline">
          Here's
          <span class='embedded'></span>
          an embedded div
          <br/> 
          and more text
        </p>
      </div>
    </div>`

链接：JSFiddle

【讨论】：

【解决方案2】：

你可以很简单地用一个包装的 div 和一些弹性框来做到这一点。

.wrapper {
  display: flex;
  align-items: baseline;
}

.note {
  margin-right: 1ch;
}

.embedded {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: -15px;
    border: 1px solid black;
}

<div class="wrapper">
  <div class="note" style='display:inline-block;'>NOTE:</div>
  <div style='display:inline-block; width:200px;'>
      Here's <div class='embedded'></div> an embedded div and more text
  </div>  
</div>

【讨论】：

效果很好！我正在尝试使用“display:-webkit-inline-box;”来使用旧的 Webkit 引擎（我们需要支持 wkhtmltopdf）。在包装器和“-webkit-box-align:baseline;”中在盒子里。它适用于某些情况，但两行文本似乎再次与底部基线对齐。您知道这是否是该标准的预期行为吗？
我不知道。 flex box 的实现一度风靡一时。