编辑 data-title 的样式，例如位置

Question

我不知道我是否提出了这个问题，因为我搜索了一些信息但没有找到我要找的东西。我在 data-title 中有一段很长的文字（它属于一个图片库）。文本就在模态图像的底部，但我想把它放在顶部，但我找不到编辑或更改 data-title 的位置的方法。也许在下一张图片中它看起来更简单：

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 但也许我错了。

Answer 1

Elements 的数据集属性不统一，因此您不能随意选择一个名称并希望它能起作用。不同的图书馆处理事情的方式非常不同。我认为您正在使用 this 灯箱库。它的文档没有提到任何关于改变描述位置的能力。查看由上述库生成的 HTML 结构，您可以应用以下 CSS 并希望它有效：

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

这个解决方案有些糟糕，即使是对库的微小改动也会破坏一切。此外，这会将整个 desc 容器移动到顶部。我认为这是在不修改库行为的情况下所能达到的最大效果。如果您真的想自定义这些元素，您应该实现自己的灯箱或找到一个允许您进行此类更改的库。

编辑 data-title 的样式，例如位置

Edit style of data-title like, for example, position

html

css

html-dataset