html - Div 标题在网页上不对齐

Question

我正在构建的网站上有一个主页，其中有两行内容。每行包含 2 个段落；每个都有一个标题和相关的按钮。例如:

                                    This is the second paragraph
This is the first paragraph         and it does not line up
"content...................         "content....................
..........................          .............................
.........................."         ............................."
                                    |BUTTON|

问题是我希望每个 div 中的标题彼此对齐；每个标题的第一行应该对齐。这是我的 div 代码:

/* Home page introductory paragraphs layout */
div {
    display: inline-block;
    height: 200px;
    width: 500px;
    padding-left: 75px;
    padding-right: 75px;
    padding-top: 40px;
    padding-bottom: 40px;
}

有没有办法指定标题始终位于 block 的顶部？

Answer 1

默认vertical-align值为 baseline。如果您需要元素顶部对齐，可以将其设置为 top。

div {
  display: inline-block;
  vertical-align: top; /*NEW*/
}