Невозможно сделать текст <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>

html css vertical-alignment css-grid

1

Alexey Blaisdale 31 Май 2019 в 10:37

Answer 1

По умолчанию размер строки будет auto - вы можете изменить его, используя свойство grid-template-rows или grid-auto-rows. Я использую 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>

Обратите внимание, что это не полное решение, потому что вы пытаетесь сопоставить элементы сетки в смежных сеточных контейнерах , и это будет отображаться под предварительным просмотром нового < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid" rel = "nofollow noreferrer"> модуль подсетки . Было бы проще сопоставить внутренние сетки , если модуль подсетки был поддержан в браузерах (только в версиях Firefox Nightly на данный момент). Посмотрите некоторые обсуждения, если вы заинтересованы:

1

kukkuz 31 Май 2019 в 09:36

Answer 2

Добавьте следующее свойство:

#prosolcolumns > div{
    grid-template-rows: 40px auto;
}

0

gurumaxi 31 Май 2019 в 07:43

Невозможно сделать текст <p> выровненным по верху в сетке

2 ответа

Похожие вопросы

Новые вопросы

html