Question

如何让CSS在自己的div中并排放置两个绝对定位的图像，但是在父包装内呢？

我查看过很多stackoverflow问题，但找不到如何处理两个或多个图像的答案。我尝试了多个CSS示例，但无济于事。

我整理了一个模拟示例，模拟我正在尝试做的事情。见http://www.netplayhockey.com/test.php。请注意，图像宽度不同，并且在自己的div中有一个原因（与我为此演示删除的一些绝对文本定位有关）。

页面宽度为1024px（image1 598px，image2 426px）。如果减小浏览器的宽度，我希望两个图像都缩小。但是，相反，图像不会改变大小。实际上，image2与image1重叠。

当浏览器宽度小于600px时，它正在做我想要的（我选择600px作为示例，我真的希望这适用于移动而不是iPad），我希望image2在image1下移动。并且图像要居中。

注意：如果我使用相对定位和浮动，我将无法获得所需的居中结果（当屏幕小于1024px时图像堆叠，并且它们不会居中）。

附件是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;
    }
}

Answer 1

这对你有用吗？

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;}
}

Answer 2

是。谢谢！我略微修改了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;
        }
    }

如何使用CSS重新调整绝对定位图像的大小？

2 个答案: