将 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。任何帮助将不胜感激！

Answer 1

你可以很简单地用包装 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>

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

Link : JSFiddle

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

Aligning div to baseline of the first line of another div?

css

vertical-alignment

baseline