0

レスポンシブデザインで絶対にポジションをどのように扱うかについての提案はありますか？

幅が1000pxのデザインがあり、そのコンテナから左にdiv（1000px）画像があり、position：absoluteとして配置されています。

問題は、ブラウザの幅を狭くすると水平スクロールが発生することです。

レスポンシブデザインで絶対divを配置する適切な方法は何ですか？

編集：これは私がhttp://jsfiddle.net/FeAUr/について話している例です。例として、コンテナの幅を1000pxではなく100pxに設定しました。

重要なのは、画像を含む「絶対的な」要素のために、ブラウザの幅を狭くすると水平スクロールバーが表示されるということです。水平スクロールバーが表示されないように、適切な方法でそれを行うにはどうすればよいですか？

<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を作成し、画像をbackground-imageとして配置することで実現しました。レスポンシブ画像にzurb資金を使用することも役に立ちました。

于 2013-02-06T18:44:37.867 に答える