Question

我正在尝试将图片下方的图标从图像下方移动到图像右侧。

我不太了解HTML / CSS，但在我看来，图像包含在div data-title中，而且标题位于{{3}中的div .lb-outerContainer中}}。我尝试从.lb-dataContainer移除clear: both ::after并将outerContainer添加到两个div中，但它不起作用。图像向左移动但标题没有向上移动。

有没有人有任何建议？谢谢:)）

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>

Lightbox2希望将标题移动到图像的右侧

1 个答案: