Как сделать, чтобы все кнопки на карточках были на одной высоте (HTML, CSS) ⇐ CSS
-
Anonymous
Как сделать, чтобы все кнопки на карточках были на одной высоте (HTML, CSS)
Я хочу спросить, как сделать так, чтобы все кнопки на разных карточках с разной длиной текста находились в одном месте. Кнопки должны находиться в конце карточек. Это то, чего я хочу. А это мой HTML и CSS-код.
Документ * { поле: 0 пикселей; отступ: 0 пикселей; размер коробки: граница-коробка; семейство шрифтов: без засечек; } тело { цвет фона: #f0f0f0; } .card-контейнер { дисплей: гибкий; оправдание-содержание: центр; flex-wrap: обертка; маржа сверху: 100 пикселей; } .карта { ширина: 325 пикселей; цвет фона: #f0f0f0; радиус границы: 8 пикселей; переполнение: скрыто; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); поле: 20 пикселей; } .card изображение { ширина: 100%; высота: авто; } .card-content { отступ: 16 пикселей; } .card-content h3 { размер шрифта: 28 пикселей; нижнее поле: 8 пикселей; } .card-content p { цвет: #666; размер шрифта: 15 пикселей; высота строки: 1,3; } .card-content .btn { отображение: встроенный блок; отступы: 8 пикселей 16 пикселей; цвет фона: #333; текстовое оформление: нет; радиус границы: 4 пикселя; поле сверху: 16 пикселей; цвет: #fff; } Это название карточки 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Виверра maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam Erat velit scelerisque in dictum non consectetur. Урус в массе времени nec feugiat nisl pretium fusce id.
Подробнее Это название карточки 2, оно длиннее Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Подробнее Это название карточки 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Эрат pellentesque adipiscing commodo elit и imperdiet dui. Подробнее
Спасибо за любые дополнительные ответы. Если у вас есть другие предложения, дайте мне знать, спасибо.
Я хочу спросить, как сделать так, чтобы все кнопки на разных карточках с разной длиной текста находились в одном месте. Кнопки должны находиться в конце карточек. Это то, чего я хочу. А это мой HTML и CSS-код.
Документ * { поле: 0 пикселей; отступ: 0 пикселей; размер коробки: граница-коробка; семейство шрифтов: без засечек; } тело { цвет фона: #f0f0f0; } .card-контейнер { дисплей: гибкий; оправдание-содержание: центр; flex-wrap: обертка; маржа сверху: 100 пикселей; } .карта { ширина: 325 пикселей; цвет фона: #f0f0f0; радиус границы: 8 пикселей; переполнение: скрыто; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); поле: 20 пикселей; } .card изображение { ширина: 100%; высота: авто; } .card-content { отступ: 16 пикселей; } .card-content h3 { размер шрифта: 28 пикселей; нижнее поле: 8 пикселей; } .card-content p { цвет: #666; размер шрифта: 15 пикселей; высота строки: 1,3; } .card-content .btn { отображение: встроенный блок; отступы: 8 пикселей 16 пикселей; цвет фона: #333; текстовое оформление: нет; радиус границы: 4 пикселя; поле сверху: 16 пикселей; цвет: #fff; } Это название карточки 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Виверра maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam Erat velit scelerisque in dictum non consectetur. Урус в массе времени nec feugiat nisl pretium fusce id.
Подробнее Это название карточки 2, оно длиннее Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Подробнее Это название карточки 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Эрат pellentesque adipiscing commodo elit и imperdiet dui. Подробнее
Спасибо за любые дополнительные ответы. Если у вас есть другие предложения, дайте мне знать, спасибо.
Мобильная версия