Lightbox2想將標題移動到圖像的右側

我正試圖從圖像下方向圖像右側移動標題，內容是data-title。Lightbox2想將標題移動到圖像的右側

我不太瞭解HTML/CSS，但在我看來，圖像包含在div .lb-outerContainer中，並且標題在Lightbox CSS的div .lb-dataContainer中。我嘗試從::after中刪除clear: both,outerContainer，並將display: inline-block添加到兩個div，但它不起作用。圖像移動到左側，但標題沒有向上移動。

有沒有人有任何建議？謝謝:)

來源

2017-08-07 psadosky

您是否嘗試將img和標題浮動到左側？ –

你將不得不放置一些自定義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>

來源

2017-08-07 18:58:49

Lightbox2想將標題移動到圖像的右側

回答

相關問題