#css #reactjs #positionin&
#css #reactjs #позиционирование
Вопрос:
Для этого я создал песочницу. Проблема в том, что я хочу, чтобы текст под изображениями был в одну строку, и я попытался это изменить:
.timeline-carousel__item-inner {
position: relative;
paddin&-top: 45px;
}
к этому:
.timeline-carousel__item-inner {
position: fixed;
bottom: 0;
}
И его работы делают весь текст в одном положении, но затем изображения и все остальное перемещаются вверх.
Пожалуйста, посоветуйте?
Комментарии:
1. Просто нужно немного уточнить, у вас не может быть, чтобы все изображения были одинакового размера, если да, то как вы хотите справиться с пробелом между текстом и изображением? если изображение короче обычного размера
2. Ширина изображений одинакова, а высота может быть любой. Я просто хочу, чтобы текст и строки под изображениями располагались по прямой линии, а не повторяли высоту изображения. Я бы хотел, чтобы
<div&&t;было исправлено удержание текста под изображением, а затем строка изображения могла быть исправлена-top, если вы понимаете, просто чтобы это выглядело красиво
Ответ №1:
Тогда я бы предположил, что у вас есть, например, класс
.timeline-carousel__ima&e {
paddin&-ri&ht: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-hei&ht: 164px;
}
Таким образом, у вас получается flex, который отодвигает текст от изображения, а минимальная высота гарантирует, что все контейнеры будут по крайней мере такого размера, но тогда, если у вас длинные изображения, у вас может возникнуть проблема, лучше, по крайней мере, иметь максимальную высоту для изображений или максимальное соотношение высоты к ширине, измените минимальную высоту в соответствии с вашими потребностями, надеюсь, это решит вашу проблему.
Удачи
Комментарии:
1. Это сработало на секунду, затем я изменил размер окна, и оно сломалось, попробую что-нибудь..
2. Это работает только тогда, когда окно браузера маленькое, когда оно разбивается на весь экран
3. Я сделал клип , показывающий, как это выглядит