вопрос о позиционировании css

#css #positioning

#css #позиционирование

Вопрос:

Я изо всех сил пытаюсь выяснить, какой должна быть мучительно простая задача CSS: выровнять блок текста справа от изображения и расположить блок по вертикали так, чтобы он совпадал с нижней частью изображения; и я бы предпочел не указывать высоту для содержащего элемента, поскольку это для длинного списка изображений, и размеры будут различаться (но все с определенной максимальной шириной / высотой). Я попытался определить родительский элемент с помощью «position: relative», содержащий два divs с плавающей запятой, один с изображением, а другой с текстовым блоком, расположенным «absolute» и «bottom: 0», и, похоже, я не могу выровнять текстовый блок с нижней частью изображения…

любая помощь здесь вполне может помочь мне предотвратить приступ безумия 😉

1. обязательно ли использовать только css или javascript подходит для этого?

2. текст будет поверх изображения или справа от него?

3. изображение того, что вы надеетесь получить, было бы очень полезно.

Ответ №1:

Если текст идет справа от изображения, просто используйте элемент с display:inline-block после изображения и заключите все в блок (например, div). Смотрите это здесь

1. Вау — реквизит для выяснения того, о чем он говорил! 🙂

2. Дэйв.. у меня нет.. просто дикое предположение 😉

3. vertical-align В вашем примере ничего не делает. Это стандартное расположение для текстовых <> встроенных блоков. vertical-align работает только в таблицах. Смотрите phrogz.net/css/vertical-align/index.html

4. @Rudie это неправда, вертикальное выравнивание также хорошо работает со встроенными блоками.. смотрите эту скрипку , вы можете изменить выравнивание по вертикали на среднее или верхнее, и текст будет перемещаться соответствующим образом

5. @nickpish вы должны установить отображение: встроенный блок . обновил мой код jsfiddle.net/X4CeC