1. 首頁
  2. 問答
  3. 如何在響應式頁面佈局中定位div容器？

如何在響應式頁面佈局中定位div容器？

2013-05-05 33 views
1

據我所知，「絕對」標籤不會與我的主題的響應式設計相媲美。如何在響應式頁面佈局中定位div容器？

如果我將圖像div容器放在適合全寬窗口的位置（反之亦然），如果我收緊我的brwoser窗口，它將不會與其他元素一起浮動。

enter image description here

enter image description here

我認爲這將需要很長時間堆載之前，我會找出自己。

來源

2013-05-05 user2351526

+0

http://podstrigis.com/test3/test page – user2351526 2013-05-05 12:20:57

回答

0

從圖像中取出最小寬度，它將正確重新調整大小。最小寬度限制了它的正確重新調整大小。爲了防止它變得很小，你可以使用最小寬度，使它小於700px，因爲這只是一個小小的跳躍。您還可以使用媒體查詢在該屏幕尺寸下使其寬度達到70％。

我想這就是你想要它做什麼？

來源

2013-05-05 09:17:48

0

position: absolute應該很少用於頁面佈局（這裏和那裏的小元素除外），因爲它將元素排除在文檔流之外，這意味着其他元素無法響應它。

您可以通過將狗圖像向右移動並使用「沙包」效果在文本中將其向下拖動來獲得所需的效果。這裏是它如何工作的一個基本的例子：

http://codepen.io/anon/pen/uymJI

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
.outer {overflow: hidden;} 

.wrapper {width: 50%; margin: 0 auto;} 

.image { 
    float: right; 
    margin-right: -600px; 
} 

.image:before { 
    content: " "; 
    height: 300px; 
    width: 1px; 
    overflow: hidden; 
} 
</style> 

</head> 
<body> 
<div class="outer"> 
    <div class="wrapper"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 

     <div class="image"><img src="http://podstrigis.com/wp-content/uploads/2013/05/1dreamstime_xxl_25491444.png" alt="Dog listening on can phone"></div> 

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 



     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
    </div> 
</div> 

</body> 
</html>

編輯：基於下面的評論，另一個（雖然最終不足）的嘗試：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
.outer {overflow: hidden;} 

.wrapper {width: 50%; margin: 0 auto; } 

.ofl {overflow: hidden;} 

.image {float: right; margin-right: -600px;} 

.map {clear: both; } 

.map div {width: 100%; height: 300px; background: green;} 

@media only screen and (min-width: 1500px) { 
    .image {margin-top: 0;} 

    .dog {margin-top: -258px;} 

    .spacer {float: right; width: 300px; height: 265px; background: white;} 

    .map {margin-top: 258px;} 

    .spacer:before { 
     content: " "; 
     height: 300px; 
     width: 1px; 
     overflow: hidden; 
     } 
} 
</style> 

</head> 
<body> 
<div class="outer"> 
    <div class="wrapper ofl"> 

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 



     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><div class="spacer"></div> 



     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 

    </div> 

    <div class="wrapper dog"> 
     <div class="image"><img src="http://podstrigis.com/wp-content/uploads/2013/05/1dreamstime_xxl_25491444.png" alt="Dog listening on can phone"></div> 
     </div> 
    <div class="wrapper ofl map"> 
     <div></div> 
    </div> 
</div> 

</body> 
</html>

來源

2013-05-05 09:18:08

+0

拉爾夫，你是救命恩人！這幾乎和我上面描述的一樣。你可以快速瀏覽一下我的測試頁面 - http://podstrigis.com/test3/？全寬瀏覽器頁面的工作原理與我想要的完全相同，但是當我收緊瀏覽器窗口時，我希望我的小狗圖片粘貼到地圖div容器（並保留上述所有文本） - http：//i.imgur。 com/KLb6KYw.jpg – user2351526 2013-05-05 12:19:05

+0

呵呵，我明白了。那麼，這很難。我已經做了一些工作，並且已經發布了上面的代碼，但它對於真實世界的使用並不夠強大。聰明人需要解決這個問題。 – 2013-05-05 15:12:08

相關問題

 相關問題