css 当两个行内div块的字体大小不同时，它们如何垂直对齐？[副本]

kcrjzv8t 于 2023-08-09 发布在其他

关注(0)|答案(5)|浏览(116)

此问题在此处已有答案：

Align inline-block DIVs to top of container element（5个答案）
Why is this inline-block element pushed downward?（8个答案）
3天前关闭。
一个div有两个子div，并将它们设置为inline-block。两个子div具有不同的字体大小。因此，它们的高度是完全不同的。
浏览器是根据什么把左边的子项垂直放置在这个位置的？为什么他们不从最高层开始呢？
这里是代码。

<div>
    <h4>Got Some Ideas for us?</h4>
    <div style="display: inline-block; width: 300px;background-color: rgb(80, 133, 130);font-size: 16px;">
        <span>AAA</span>
        
    </div>
    <div style="display: inline-block;width: 300px;background-color: rgb(154, 16, 99);font-size: 88px;">
        
        <span>BBB</span>
    </div>
</div>

字符串
这就是结果。- 谢谢-谢谢
x1c 0d1x的数据

css

来源：https://stackoverflow.com/questions/76840410/how-two-inline-block-div-are-vertical-aligned-when-they-have-differnt-font-size

5条答案

按热度按时间

yquaqz181#

同一行上的文本共享同一基线。有两种方法可以处理两个文本项的顶部对齐。
首先，您可以将vertical-align: top;应用于每个div。这是因为项目是display: inline-block;。

.small {
  display: inline-block;
  width: 300px;
  background-color: rgb(80, 133, 130);
  font-size: 16px;
  vertical-align: top;
}

.large {
  display: inline-block;
  width: 300px;
  background-color: rgb(154, 16, 99);
  font-size: 88px;
  vertical-align: top;
}

个字符
另一种方法是使用flexbox和align-items: flex-start;。这可能是我会做的方式，但这一切都取决于最终目标。Flexbox真的很强大。

.container {
  display: flex;
  align-items: flex-start;
}

.small {
  display: inline-block;
  width: 300px;
  background-color: rgb(80, 133, 130);
  font-size: 16px;
  vertical-align: top;
}

.large {
  display: inline-block;
  width: 300px;
  background-color: rgb(154, 16, 99);
  font-size: 88px;
  vertical-align: top;
}

<div>
  <h4>Got Some Ideas for us?</h4>
  <div class="container">
    <div class="small">
      <span>AAA</span>

    </div>
    <div class="large">

      <span>BBB</span>
    </div>
  </div>
</div>

的字符串

赞(0）回复(0）举报 2023-08-09

cwxwcias2#

默认对齐方式基于文本的基线。
Image
您可以使用flexbox（“display：flex;对齐项目：基线”）

赞(0）回复(0）举报 2023-08-09

nmpmafwu3#

您遇到的问题是line-height。
将较小的文本垂直对齐到顶部，并减小较大字体的行高。
测试结果：

的数据
代码：

<div style="width: 300px; vertical-align:top;">
    <div style="display: inline-block; font-size: 16px; vertical-align:top;">AAA</div>
    <div style="display: inline-block; font-size: 88px; line-height: 60px;">BBB</div>
</div>

字符串
资源来计算适当的行高相比，字体大小垂直对齐您的文字使用scss：
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

赞(0）回复(0）举报 2023-08-09

6fe3ivhb4#

这是因为文本的字体大小使它们的字体大小相同，这样就可以解决你的问题

赞(0）回复(0）举报 2023-08-09

prdp8dxp5#

这是你的答案@Tim R它不是来自chatGPT x1c 0d1x

赞(0）回复(0）举报 2023-08-09