擁有上根據具體情況

在我的第一個響應的網站工作當網站的頂部或底部的元素我遇到了以下問題：擁有上根據具體情況

對於寬的網頁我想有過的img所有div。喜歡的東西：

<img src="image.jpg"/> 
<div> some content </div> 
<div> some content </div> 
...

但是，當我們縮小瀏覽器我想有它在我所有的div：

... 
<div> some content </div> 
<div> some content </div> 
<img src="image.jpg"/>

，我發現它的唯一的解決辦法是讓

<img id="img_1" src="image.jpg"/> 
<div> some content </div> 
<div> some content </div> 
<img id="img_2" src="image.jpg"/>

，並在媒體查詢「打開」和「關閉」我現在需要或不需要的IMG。但在我看來，不是非常優雅，看得見的解決方案......我在考慮使用職位：絕對的，但它爲我帶來了更多更多的債務。

非常感謝您的幫助！格熱戈日

來源

2015-03-03 Grzegorz

我會說你的感覺是最好的。你可以使用display：flex，然後改變圖像的順序，但是最終會得到比兩個img元素更多的代碼。瀏覽器也會緩存圖片，因此用戶不必下載它兩次。 – Razz 2015-03-03 12:09:49

我覺得這樣的事情也會對你：

<img src="image.jpg" id="yourImg"/> 


function moveElement(Elm_Id, top, left) { 
    $("#" + Elm_Id).css({ "position": "relative", "top": top, "left": left }); 
}

必須這樣調用：

moveElement("yourImg", "200px", "300px");

檢查here獲取更多信息。

來源

2015-03-03 12:14:20

擁有上根據具體情況

回答

相關問題