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

Question

我有两个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。非常感谢您提供任何帮助！

- Jason Cooper

Answer 1

你可以通过一个包含 div 和一些 flex box 的方法来轻松实现它。

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

- luetkemj

---

非常好！我正在尝试使用旧的 Webkit 引擎（我们需要支持 wkhtmltopdf）并在包装器中使用"display:-webkit-inline-box;"，在盒子中使用"-webkit-box-align:baseline;"来实现相同的效果。对于某些情况它能够正常工作，但是对于两行文本似乎又会重新对齐到底部基线。您是否知道这是否是该标准的预期行为？ - Jason Cooper

我不知道。Flexbox 实现曾经一度非常混乱。 - luetkemj

Answer 2

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

- Dhruv