響應式設計和位置：絕對

有什麼建議您如何與位置合作：絕對具有響應式設計？響應式設計和位置：絕對

我有一個設計是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

響應式設計和位置：絕對

回答

相關問題