Question

我在容器中有三个文本项。中间文字有较大的字体。我想将第一个项目的顶部与第二个项目的顶部对齐。

.container {
  border: 1px solid black;
}

.container p {
  display: inline-block;
}

.large {
  font-size: 50px;
}

<body>
  <div class="container">
    <p class="first">One</p>
    <p class="large">Two</p>
    <p>Three</p>
  </div>
</body>

https://jsfiddle.net/7ofrravh/2/

我能想到的唯一方法就是使用绝对位置，但是当我改变屏幕尺寸时这会失控。我希望能够改变屏幕的大小，让一切都保持不变。有谁知道这样做的方法？

Answer 1

以下是代码的编辑版本

.container {
  border: 1px solid black;
}

.container p {
  display: inline-block;
  margin:0;
}
.container p.first {
  vertical-align:top;
  line-height:40px;
}

.large {
  font-size: 50px;
}

<body>
  <div class="container">
    <p class="first">One</p>
    <p class="large">Two</p>
    <p>Three</p>
  </div>
</body>

Answer 2

更改CSS：

.container {
  border: 1px solid black;
}

.container p {
  display: inline-block;
  vertical-align:top;
  margin:0;
}

.large {
  font-size: 50px;
  line-height:1;
}

＆＃13;

.container {
  border: 1px solid black;
}

.container p {
  display: inline-block;
  vertical-align:top;
  margin:0;
}

.large {
  font-size: 50px;
  line-height:1;
}

＆＃13;

<body>
  <div class="container">
    <p class="first">One</p>
    <p class="large">Two</p>
    <p>Three</p>
  </div>
</body>

＆＃13;

Answer 3

我就是这样做的：https://jsfiddle.net/7ofrravh/5/。通过使用内容对齐使容器变得灵活，首先使用align-items: flex-start。然后只需使用margin: 10px 0 0 0修复第一段位置。

Answer 4

您需要将代码更改为更像这样：

.container {
  border: 1px solid black;
}

.container p {
  display: inline-block;
  margin:0;
}

.large {
  font-size: 50px;
  line-height:1;
}
  
.first {
  vertical-align:top;
}

<body>
  <div class="container">
    <p class="first">One</p>
    <p class="large">Two</p>
    <p>Three</p>
  </div>
</body>

如何在较大的文本顶部对齐较小的文本

4 个答案: