响应式DIv包含2张图片

Question

我正在使用来自www.crosstec.de的基于Joomla的网站模板xtec，该模板不喜欢我使用插入任何文章中的基于JQuery的代码。

我试图创建一个响应式div，其中包含2张图像，并且试图完全在CSS中完成。

这就是我要达到的目标。

1）正常宽度的屏幕/浏览器将两张图像的宽度均为465px x高507像素-并排放置，两幅图像之间的间隙在浏览器窗口中居中

2）当我减小屏幕/浏览器的宽度时，图像应按比例缩小，直到在屏幕/浏览器的点达到850px宽为止，然后图像应移动到单列，然后两幅图像在彼此顶部垂直对齐缩小屏幕/浏览器他们会继续按比例缩小尺寸，但仍居中。

我使用了“ 带有响应图像的2列CSS响应式布局 ”中的代码作为入门

我的网站网址是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间距：