响应式DIv包含2张图像

Question

我正在开发一个名为xtec的基于Joomla的网站模板，来自www.crosstec.de，它不喜欢我在任何文章中使用基于JQuery的代码。

我正在尝试创建一个响应式div，其中包含2个图像，并且我试图在css中完全执行此操作。

这就是我想要实现的目标。

1）正常宽度的屏幕/浏览器都有两个图像，每个图像的宽度为465像素宽x 507像素 - 并排，在浏览器窗口中水平居中2像素间距

2）当我缩小屏幕/浏览器宽度时，图像应按比例缩小，直到屏幕/浏览范围达到850px宽，然后图像应移动到单个列，然后两个图像垂直对齐，当我减少屏幕/浏览器时，它们继续按比例缩小，仍然在列中。

我使用“2-column CSS responsive layout with a responsive image”中的代码作为首发

我的网站网址为http://www.clickandrent.mobi，我尝试执行此操作的2张图片位于全宽度滑块下方，位于底部2张图片上方。

非常感谢 - Martyn

Answer 1

请将此代码添加到样式表中，它应该可以使用。我刚在你的网站上测试了它并且它正在工作：

.group {
    text-align: center;
} 

.left {
    display: inline-block;
    width: 38.5%;
}

.left img {
    float: right;
}

.right {
    display: inline-block;
    width: 38.5%;
    margin-left: 3%;
}

.right img {
    float: left;
}

@media (max-width: 850px) {

div.left {
    float: none;
    width: auto;
    display: block;
    margin-bottom: 20px;
}

div.left img {
    display: block;
    margin: 0px auto;
    float: none;
}

div.right {
    float: none;
    width: auto;
    margin-left: 0%;
    display: block;
}

div.right img {
    display: block;
    margin: 0px auto;
    float: none;
}

}

2px差距：

25px差距：