三个文本正文与内联块不对齐

<div class="container">
  <div class="text">文本1</div>
  <div class="text">文本2</div>
  <div class="inline-block">内联块</div>
</div>

<style>
.container {
  overflow: hidden; /* 清除浮动 */
}
.text, .inline-block {
  float: left;
}
</style>

<div class="container">
  <div class="text">文本1</div>
  <div class="text">文本2</div>
  <div class="inline-block">内联块</div>
</div>

<style>
.container {
  display: flex;
  align-items: center; /* 水平居中对齐 */
}
</style>

<div class="container">
  <div class="text">文本1</div>
  <div class="text">文本2</div>
  <div class="inline-block">内联块</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 将容器分为3列，每列宽度平均分布 */
  gap: 10px; /* 网格之间的间隔 */
}
</style>