0

有什么建议您如何使用 position:absolute 响应式设计？

我有一个宽度为 1000px 的设计，从那个容器 div(1000px) 离开我有图像，定位为 position: absolute。

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

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

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

关键是，由于带有图片的“绝对”元素，当我减小浏览器的宽度时，我会得到水平滚动条。我怎样才能以正确的方式做到这一点，我不会得到水平滚动条？

<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;
}
4

1 回答 1

0

我通过为背景制作另一个 div 并将图像作为背景图像来实现这一点。使用 zurb 基金来响应图像也有帮助。

于 2013-02-06T18:44:37.867 回答