@poroshok_uhodi

Как изменить положение у строчно-блочных элементов списка?

Здравствуйте. Я обучаюсь написанию сайтов, почти в самом начале пути(ввиду этого прошу простить меня за возможно глупый вопрос) и возникла проблема решение которой не получается просто на гуглить. Задача была такая: создать 4 карточки по 2 в ряд. Сделать в верхней части каждой картинку, ниже заголовок и несколько пунктов описания. Я решил сделать через список.
По началу было так:
60eb47189710a044563419.jpeg
Код из html:
<h1 class="modules-header">Заголовок</h1>
    <ul class="modules-block">
      <li class="modules-card intro">
          <h3>Блок 1</h3>
          <ul>
            <li>пункт 1</li>
            <li>пункт 2</li>
            <li>пункт 3</li>
            <li>пункт 4</li>
          </ul>
      </li>
      <li class="modules-card b-html">
          <h3>Блок 2</h3>
          <ul>
            <li>пункт 1</li>
            <li>пункт 2</li>
            <li>пункт 3</li>
            <li>пункт 4</li>
            <li>пункт 5</li>
          </ul>
      </li>
      <li class="modules-card b-css">
          <h3>Блок 3</h3>
          <ul>
            <li>пункт 1</li>
            <li>пункт 2</li>
            <li>пункт 3</li>
            <li>пункт 4</li>
            <li>пункт 5</li>
            <li>пункт 6</li>
          </ul>
      </li>
      <li class="modules-card layout">
          <h3>Работа с макетом</h3>
          <ul>
            <li>пункт 1</li>
            <li>пункт 2</li>
            <li>пункт 3</li>
          </ul>
      </li>
    </ul>

Списку и его элементам прописал такие свойства в CSS:
.modules-block {
  margin: 0;
  list-style-type: none;
  font-size: 0;
}

.modules-card {
  display: inline-block;
  text-align: left;
  width: 572px;
  height: 505px;
  padding-top: 180px;
  background-color: #b6b6b6;
  font-size: 1rem;
  background-position: top;
  background-repeat: no-repeat;
}


И пока в блоках были только картинки всё было хорошо, но когда стал наполнять текстом то блоки стали съезжать. Вот так:
60eb43d97f756553499809.jpeg
Пытаясь решить эту проблему я перепробовал всё что мне приходило в голову. Решить её не удалось, но за то я заметил что если в блоки добавить одинаковое количество текста то смещения пропадают. Вот так:
60eb445f755f0256457245.jpeg
Не буду делать глупых догадок, и очень хочется узнать, есть ли возможность как то это исправить(не делая одинаковое количество теста)? Или такое в принципе?
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
У инлайна по умолчанию стоит выравнивание по базовой линии текста.
Вам достаточно просто переопределить его

vertical-align: top;

Но верстка сеток на inline-block – это архаизм. Здесь вполне можно использовать flex + flex-wrap. А лучше grid, если можно по условиям тз.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Isak08
Интересуюсь веб-разработкой)
Рекомендую по изучать grid , https://developer.mozilla.org/ru/docs/Web/CSS/CSS_... тут все понятно. Потратите пару десятков минут , но такие проблемы не будут появляться в будущем.
Ответ написан
@alexalexes
</li><!-- тут символ переноса строки, вносит свою лепту как текстовая нода, имеющая небольшие, но геометрические размеры -->
      <li class="modules-card layout">

Часто такой эффект выявляется, когда используется display: inline-block.
Выход - не переносить li элементы (и не оставлять пробелы), или нивелировать размер текстовых нод с помощью css.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы