如何用CSS重新定位絕對定位的圖像？

你如何獲得CSS縮放兩個絕對定位的圖像，並排，在他們自己的div內，但在父包裝？如何用CSS重新定位絕對定位的圖像？

我看了很多stackoverflow的問題，但找不到如何處理兩個或多個圖像的答案。我嘗試了多個CSS示例，但無濟於事。

我整理了一個模擬示例，模擬我正在嘗試做什麼。見http://www.netplayhockey.com/test.php。請注意，這是因爲圖像的寬度不同以及它們自己的div（與我爲本演示刪除的某些絕對文本位置有關）。

頁面寬度爲1024px（image1 598px，image2 426px）。如果您減小瀏覽器的寬度，我希望這兩個圖像縮小。但是，圖像不會改變大小。實際上，image2與image1重疊。

當瀏覽器寬度小於600像素（我選擇600像素作爲例子，我真的希望這發生移動但不是iPad）時，我想要image2移動到image1下。並且圖像被集中。

注意：如果我使用相對定位和浮動，我不會得到所需的居中結果（圖片在屏幕小於1024像素時堆疊，並且不居中）。

附件爲HTML和CSS：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<link href="test.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div class="container"> 
    <div class="footer-wrapper"> 
     <div class="footer"> 
      <div class="footer-left"><img src="image1.png" /></div> 
      <div class="footer-right"><img src="image2.png" /></div> 
     </div> 
    </div> 
</div> 
</body> 
</html> 

body { 
    position:relative; 
    background:#999; 
    margin:0; 
    padding:0; 
} 
.container { 
    position:relative; 
    max-width:1024px;   
    margin:0 auto; 
} 
.footer-wrapper { 
    position:relative; 
} 
.footer {    
    position:relative; 
} 
.footer-left {  
    position:absolute; 
    left:0; 
} 
.footer-right {  
    position:absolute; 
    right:0; 
} 
.footer img { 
    max-width:100%; 
    text-align:center; 
    height:auto; 
} 
@media all and (max-width:600px) { 
    .footer-left { 
     position:relative; 
     text-align:center; 
    } 
    .footer-right { 
     position:relative; 
     text-align:center; 
    } 
}

來源

2014-11-05 user2140857

將這項工作的嗎？

http://jsfiddle.net/PR4DE/btzj5dtu/

以供將來參考：

<div class="grid"> 
    <div class="col-1"><img src="http://www.netplayhockey.com/image1.png"></div> 
    <div class="col-2"><img src="http://www.netplayhockey.com/image2.png"></div> 
</div> 

/*style*/ 
.grid {position:relative;max-width:960px;margin:0 auto;} 
.col-1 {position:relative;width:58.4%;float:left;} 
.col-2 {position:relative;width:41.6%;float:left;} 


@media (max-width:960px) { 
.col-1 {width:100%;float:none;height:auto;} 
.col-2 {width:100%;float:none;height:auto;} 
img {width:100%;height:auto;} 
}

來源

2014-11-05 20:31:03

真棒:)很高興我可以幫助。 - 你會做出這個答案嗎？ – 2014-11-05 21:01:23

是。謝謝！我稍微修改了CSS（刪除了一些不需要的東西，就像我想要的那樣工作）。 - 我不得不重新編輯，以顯示CSS代碼。在我發佈我的謝謝

.footer {    
     position:relative; 
    } 
    .footer-left {  
     position:relative; 
     float:left; 
     width:58.4%; 
    } 
    .footer-right {  
     position:relative; 
     float:left; 
     width:41.6%; 
    } 
    .footer img { 
     max-width:100%; 
     height:auto; 
    } 
    @media all and (max-width:600px) { 
     .footer-left, .footer-right { 
      position:relative; 
      float:none; 
      width:100%; 
      height:auto; 
      text-align:center; 
     } 
    }

來源

2014-11-05 21:03:56 user2140857

如何用CSS重新定位絕對定位的圖像？

回答

相關問題