图像灯箱旁边的文字

Question

我在Wordpress上使用WP Featherlight插件。我想把一件艺术品的描述放在图片旁边的灯箱里，而不是像现在这样。我怎样才能做到这一点？

You can see the website here

希望你能帮助我！

Answer 1

您必须更改灯箱的css属性以及相应的figcaption元素。

参考代码＆amp;相应地做出改变：

.gallery-item {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    width: 100%;
    min-width: 260px;
}

.gallery-icon {
    display: inline-block;
    vertical-align: middle;
}

.gallery-caption {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
}

完成上述更改后附加屏幕截图：

Answer 2

1。将您的图库容器（例如div#gallery-2）设置为弹性行。

像这样：

display: flex;
flex-flow: row wrap;

2。设置figure.gallery-item以弯曲并对齐文字，提供固定宽度（我使用25％），以便项目按行堆叠，否则每个项目都会全宽推下一个：

属性：

display: flex;
align-items: center;
width: 25%;

3。让.gallery-caption从图像呼吸一些。 属性：

margin-left: 5px;

Answer 3

感谢您的回复。如果用户点击某件艺术品，则灯箱将会打开。我希望描述在艺术作品的右侧。在灯箱中，我想提供比实际页面更多的信息。希望这更清楚。