使用內聯：塊和可變寬度的響應式佈局

我正在修改lightbox（Magnific Popup）佈局以包含響應式標題div。目標是讓標題浮動在照片旁邊，然後在窗口大小調整時摺疊到照片下方。使用內聯：塊和可變寬度的響應式佈局

我希望標題的最小寬度大約爲300px（確切的寬度並不重要，這可以是百分比）。如果窗口寬度無法容納照片的組合寬度（根據照片而異）+標題的寬度，則標題應該在照片下方流動並跨越照片的整個寬度，如您在此圖中所看到的 -

enter image description here

問題是這樣的：

我曾嘗試使用兩個div的display:inline-block，但不能得到標題div來調整它的崩潰照片下方之後。這可以在CSS中完成嗎？我知道這對媒體查詢是可能的，但是在這種特殊情況下，由於每張照片的寬度不同，因此很難確定確切的斷點。

非常感謝您的任何幫助或建議。謝謝。

來源

2013-08-03 ogot

我認爲這將是最簡單的媒體查詢。設置任意寬度，並在窗口較寬時使標題浮動到右側，並在下方將其設置爲100％寬度。 I.e：

/* Without media query */ 
.caption { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 300px; 
    ... 
} 

@media (max-width: 640px) { 
    .caption { 
     position: static; 
     width: 100%; 
     ... 
    } 
}

我已經在小提琴中說明了這一點：http://jsfiddle.net/eczYP/。

來源

2013-08-03 12:42:58

謝謝，我希望有一個更流暢的解決方案（不是基於最大寬度，因爲照片尺寸不同），但看起來這將是最好的解決方案！ – ogot

是的，根據我的經驗，當屏幕寬度下降時，媒體查詢通常是行爲發生根本變化時最合理的選擇。 –

使用內聯：塊和可變寬度的響應式佈局

回答

相關問題