2015-03-03 69 views
0

在我的第一个响应的网站工作当网站的顶部或底部的元素我遇到了以下问题:拥有上根据具体情况

对于宽的网页我想有过的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。但在我看来,不是非常优雅,看得见的解决方案......我在考虑使用职位:绝对的,但它为我带来了更多更多的债务。

非常感谢您的帮助! 格热戈日

+0

我会说你的感觉是最好的。你可以使用display:flex,然后改变图像的顺序,但是最终会得到比两个img元素更多的代码。浏览器也会缓存图片,因此用户不必下载它两次。 – Razz 2015-03-03 12:09:49

回答

0

我觉得这样的事情也会对你:

<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获取更多信息。