html - 无法使 <p> 文本在网格布局中与顶部对齐

Question

我创建了一个简单的两列 CSS 网格布局，h2 元素在顶部正确对齐，但 P 元素垂直对齐到中间。

我试过添加 vertical-align: top 和 vertical-align: text-top，没有任何改变。

#prosolcolumns {
  padding: 40px !important;
  display: grid !important;
  grid-gap: 40px !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  grid-template-rows: auto !important;
  background: #ffffff !important;
  max-width: 90% !important;
  min-width: 50% !important;
  box-sizing: border-box;
  /* не поддерживается в CSS2 */
  margin-left: auto !important;
  margin-right: auto !important;
}

#prosolcolumns>div,
#prosolcolumns>noindex>div {
  display: grid;
  vertical-align: top !important;
  width: auto !important;
  padding: 40px !important;
  box-sizing: border-box;
  /* не поддерживается в CSS2 */
}

#prosolcolumns p {
  padding: 0px 0px 0px 0px !important;
  margin-left: 0px !important;
  text-align: justify;
}

#prosolcolumns h2 {
  margin-left: 0px !important;
}

<div id="prosolcolumns">
  <div>
    <h2>Problem</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat sodales quam, vitae auctor ligula consequat ut. Phasellus quis mollis lectus. Aenean aliquet enim in suscipit rutrum. Praesent quis pellentesque orci, vel auctor lorem. Sed tortor
      ligula, porttitor quis lorem vitae, vehicula consectetur metus. Phasellus accumsan lectus in turpis suscipit blandit. Aenean ornare, nulla id tempus semper, lectus augue lobortis nulla, aliquam gravida risus mauris at diam. Donec in maximus nisl.
      Nullam luctus metus ut lectus commodo, a tincidunt ex ultrices. Phasellus in sollicitudin justo. Cras faucibus et diam quis facilisis. Nam ac lectus sem. Duis sit amet est nec felis malesuada semper quis pretium arcu. Sed laoreet mattis nisl, non
      tempor quam porttitor et. Nulla non ante sit amet ex blandit tincidunt nec sit amet lorem. Nam vitae lacus pretium, porta leo id, maximus enim. Vestibulum vehicula nunc vel enim euismod, ac convallis sem iaculis. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Phasellus sit amet sem sapien. Sed vel turpis eget nunc facilisis maximus fermentum vel tellus.
    </p>
  </div>
  <div>
    <h2>Solution</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat sodales quam, vitae auctor ligula consequat ut. Phasellus quis mollis lectus. Aenean aliquet enim in suscipit rutrum. Praesent quis pellentesque orci, vel auctor lorem. Sed tortor
      ligula, porttitor quis lorem vitae, vehicula consectetur metus. Phasellus accumsan lectus in turpis suscipit blandit. Aenean ornare, nulla id tempus semper, lectus augue lobortis nulla, aliquam gravida risus mauris at diam. Donec in maximus nisl.
      Nullam luctus metus ut lectus commodo, a tincidunt ex ultrices.
    </p>
  </div>
</div>

Answer 1

行大小默认为 auto - 您可以使用 grid-template-rows 或 grid-auto-rows 更改它属性(property)。我在下面的演示中使用了 grid-auto-rows: min-content:

#prosolcolumns {
  padding: 40px !important;
  display: grid !important;
  grid-gap: 40px !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  grid-template-rows: auto !important;
  background: #ffffff !important;
  max-width: 90% !important;
  min-width: 50% !important;
  box-sizing: border-box;
  /* не поддерживается в CSS2 */
  margin-left: auto !important;
  margin-right: auto !important;
}

#prosolcolumns>div,
#prosolcolumns>noindex>div {
  display: grid;
  grid-auto-rows: min-content; /* added */
  vertical-align: top !important;
  width: auto !important;
  padding: 40px !important;
  box-sizing: border-box;
  /* не поддерживается в CSS2 */
}

#prosolcolumns p {
  padding: 0px 0px 0px 0px !important;
  margin-left: 0px !important;
  text-align: justify;
}

#prosolcolumns h2 {
  margin-left: 0px !important;
}

<div id="prosolcolumns">
  <div>
    <h2>Problem</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat sodales quam, vitae auctor ligula consequat ut. Phasellus quis mollis lectus. Aenean aliquet enim in suscipit rutrum. Praesent quis pellentesque orci, vel auctor lorem. Sed tortor
      ligula, porttitor quis lorem vitae, vehicula consectetur metus. Phasellus accumsan lectus in turpis suscipit blandit. Aenean ornare, nulla id tempus semper, lectus augue lobortis nulla, aliquam gravida risus mauris at diam. Donec in maximus nisl.
      Nullam luctus metus ut lectus commodo, a tincidunt ex ultrices. Phasellus in sollicitudin justo. Cras faucibus et diam quis facilisis. Nam ac lectus sem. Duis sit amet est nec felis malesuada semper quis pretium arcu. Sed laoreet mattis nisl, non
      tempor quam porttitor et. Nulla non ante sit amet ex blandit tincidunt nec sit amet lorem. Nam vitae lacus pretium, porta leo id, maximus enim. Vestibulum vehicula nunc vel enim euismod, ac convallis sem iaculis. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Phasellus sit amet sem sapien. Sed vel turpis eget nunc facilisis maximus fermentum vel tellus.
    </p>
  </div>
  <div>
    <h2>Solution</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat sodales quam, vitae auctor ligula consequat ut. Phasellus quis mollis lectus. Aenean aliquet enim in suscipit rutrum. Praesent quis pellentesque orci, vel auctor lorem. Sed tortor
      ligula, porttitor quis lorem vitae, vehicula consectetur metus. Phasellus accumsan lectus in turpis suscipit blandit. Aenean ornare, nulla id tempus semper, lectus augue lobortis nulla, aliquam gravida risus mauris at diam. Donec in maximus nisl.
      Nullam luctus metus ut lectus commodo, a tincidunt ex ultrices.


    </p>
  </div>
</div>

---

请注意，这不是一个完整的解决方案 - 因为您要做的是匹配相邻网格容器中的网格元素，这将在新subgrid module .如果subgrid module，匹配内部网格会更容易浏览器支持(目前仅在 Firefox Nightly 版本中)。如果有兴趣，也可以查看一些讨论:

• Alignment of content vertically in adjacent flexbox containers

• Wrap CSS grid with auto placement