Я создал простой 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>
2 ответа
По умолчанию размер строки будет 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 на данный момент). Посмотрите некоторые обсуждения, если вы заинтересованы:
Добавьте следующее свойство:
#prosolcolumns > div{
grid-template-rows: 40px auto;
}
Похожие вопросы
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].