Question

有没有任何建议你如何处理职位：绝对的响应式设计？

我有一个1000px宽度的设计，从容器div（1000px）左边我有图像，定位为position：absolute。

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

使用响应式设计定位绝对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;
}

Answer 1

我通过为背景制作另一个div并将图像作为背景图像来完成此操作。使用zurb基金来提供响应式图像也有帮助。

响应式设计和位置：绝对

1 个答案: