Изменить стиль заголовка данных, например, позицию

Я не знаю, правильно ли я задаю этот вопрос, так как я искал некоторую информацию, но не нашел то, что искал. У меня есть длинный текст в заголовке данных (он принадлежит фотогалерее). Текст находится внизу модального изображения, но я бы хотел поместить его вверху, и я не могу редактировать или изменять положение заголовка данных. Возможно, на следующем изображении это выглядит проще:

Modal image the way it looks at the moment and the result I'm looking for

HTML следует следующей структуре:

<div class="col-sm-6 col-md-4 col-lg-3 item">
    <a href="#" data-lightbox="photos" data-title="This is a text">
        <img class="img-fluid" src="#">
    </a>
</div>

Я думаю в данном случае не надо править javascript но возможно я ошибаюсь.

у вас есть доступ к HTML?

Sigurd Mazanti 23.04.2022 00:33
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
1
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Свойства набора данных Elements неоднородны, поэтому вы не можете просто выбрать случайное имя и надеяться, что оно сработает. Разные библиотеки обрабатывают вещи по-разному. Я думаю, что вы используете библиотеку лайтбоксов это. В его документах ничего не говорится о возможности изменить положение описания. Глядя на структуру HTML, сгенерированную вышеупомянутой библиотекой, вы можете применить следующий CSS и надеяться, что он работает:

.lightbox {
     display: flex !important;
     flex-direction: column-reverse !important;
}

Это решение несколько плохое и даже незначительное изменение в библиотеке может все сломать. Кроме того, это перемещает весь контейнер desc наверх. Я думаю, что это максимум, чего вы можете добиться, не изменяя поведение библиотеки. Если вы действительно хотите настроить эти элементы, вам следует реализовать собственный лайтбокс или найти библиотеку, позволяющую вносить такие изменения.

Большое спасибо за ответ, TeraWattHour. Теперь надписи наверху. Я не знаю, почему кнопка закрытия (lg-close в библиотеке) перестала работать, но я думаю, что это единственное решение, которое у меня есть на данный момент, поскольку, как вы сказали, я использую библиотеку. Я использую много библиотек, потому что это простой способ избежать проблем (ну, это зависит от того, какие) при работе. Я делаю попытки с кнопкой закрытия. Возможно, проблема связана с z-индексом или слоями. Большое спасибо за вашу помощь

marlem 23.04.2022 08:01

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