灯箱 2 想要将标题移动到图像的右侧

Question

我正在尝试将标题，data-title中的内容从图像下方移动到图像右侧。

我不太了解 HTML/CSS，但在我看来，图像包含在div.lb-outerContainer中，标题位于灯箱 CSS 的div.lb-dataContainer中。我尝试从::after中删除clear: both以进行outerContainer，并向两个div添加display: inline-block，但没有奏效。图像向左移动，但标题未向上移动。

有人有什么建议吗？谢谢:)

Answer 1

您必须放置一些自定义 css 样式，并在 js 文件中添加一个内部div，如以下示例代码所示。

Find in js file - 
"<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>"

And Replace With(copy without Quats) - 
"<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="new-inner-div"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div></div>"

New Style on page - 
<style>
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
font-weight: 400;
max-width: 100%;
margin: 0 auto;
}
.new-inner-div
{
max-width: 700px;border: 1px solid red;margin: 0 auto;min-height: 346px; background: #fff;
}
.lb-outerContainer
{
width: 50% !important; height: auto !important;float: left;
}
.lb-dataContainer
{
float: right;width: 46% !important;
}
.lb-data .lb-close {
display: block;
float: left;
width: 30px;
height: 30px;
text-align: right;
outline: 0;
filter: alpha(Opacity=70);
opacity: .7;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
.lb-image
{
width:100% !important;
}
</style>