响应式设计和位置：绝对

有什么建议您如何与位置合作：绝对具有响应式设计？响应式设计和位置：绝对

我有一个设计是1000px宽度，并从该容器div（1000px）我有图像，定位为位置：绝对。

问题是，当我减少浏览器的宽度时，我得到了水平滚动。

定位绝对div与响应式设计的正确方法是什么？

谢谢

编辑：这是我讲的http://jsfiddle.net/FeAUr/一个例子。出于示例的目的，我将容器宽度设置为100px，而不是1000px。

要点是，我得到水平滚动条，当我减少我的浏览器的宽度，因为那个“绝对”与图片元素。我如何以正确的方式做到这一点，我不会得到水平滚动条？

<div class="bggrey"> 

    <div class="absolute-left"><img src="http://placehold.it/200x200" /></div> 
    <div class="row">content</div> 

</div> 

.bggrey{ 
    width: 100%; 
background: #999; 
    height:500px; 
} 

.row{ 
width:100px; 
    height:500px; 
    background: #fff; 
    margin: auto; 
} 

.absolute-left{ 
    position:absolute; 
    left:50%; 
    margin-left:-300px; 
    width:200px; 
    height:100px; 
}

干杯

来源

2013-01-22 Amel Salibasic

你的问题真的很难遵循，请澄清。视觉教具是一个好主意（我喜欢将图片存储在imgur.com上）。 – DavidDraughn

您可能需要向我们展示您正在使用的示例，以便我们可以回答这个问题。 – Fenton

有问题的网站或codepen.io或jsfiddle的链接通常对帮助最大。 – justinavery

我让另一个DIV背景，并把图像作为背景图像来实现这一点。使用zurb基金为响应式图像也提供了帮助。

来源

2013-02-06 18:44:37

响应式设计和位置：绝对

回答

相关问题