Карты Ant Design не выравниваются должным образом

Я пытаюсь создать адаптивный дизайн с карточками. Однако, если текст внутри карточек не имеет одинакового размера, карточки будут странно заворачиваться. Чего я пытаюсь добиться, так это иметь 4 строки с 8 столбцами карточек с изображением и текстом. Я также пытался использовать List, но опять же, если размер текста внутри каждой карточки не одинаков, карточки не разделяются одинаково.

Ссылка на кодовое перо

html reactjs antd

12.06.2019 15:48

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

655

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Быстрое исправление может быть с помощью CSS:

.ant-card-body{
  min-height: 80px;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

12.06.2019 16:39

Вы можете использовать для отображения текста:

   <Meta
      title = "Card title"
      description = "This is the description"
    />

12.06.2019 17:04

Другие вопросы по теме

Объединить две переменные в реакции

Rollbar + React: Несколько минимизированных JS и исходных карт

Как вызвать функцию на основе изменений в массиве, связанном с локальным хранилищем

Как анимировать один вид один за другим в React Native?

Как настроить Jest при использовании react-app-rewired и custom-cra?

Слушатели OnClick не работают после закрытия полноэкранного диалога с использованием react-material-ui

Машинопись на React HOC

Путь обновления TypeScript React Hooks

Функциональный компонент React не обрабатывает событие

Рендеринг реагирующих компонентов несколько раз на основе файлов cookie

Карты Ant Design не выравниваются должным образом

Ответы 2

Другие вопросы по теме

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