你如何獲得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 21:01:23