缩小以响应时，如何将这些图像放置在徽标下方？答案

【问题标题】：How do I position these images under the logo when scaling down to be responsive?缩小以响应时，如何将这些图像放置在徽标下方？
【发布时间】：2015-06-20 11:05:00
【问题描述】：

我在右侧的标题中有一个部分可以很好地按比例缩小，但右侧图像块的移动方式除外。图像大小调整得很好，但是一旦我开始缩小，它们会推入徽标 div，然后放置在其上方。

如何将它们放置在徽标下方并相应地排列，同时保持在标题中，而不是在达到特定屏幕尺寸时将显示变为无？

Here 是这些图像/徽章的 jsbin 的链接。实时站点在 Wordpress 中，代码太多无法发布。如果您只使用 Firebug 或开发工具，也许可以。

This 是该站点的实时版本。

另外作为旁注：我在实时站点上启用了 -190px 边距。

截图仅供参考:

【问题讨论】：

首先，您可以在.badges-container 上杀死margin: -190px。然后设置.badges { display: flex } 而不是inline-block。然后删除.badges img 上的width 指令。这可能是一个很好的起点。
如果我这样做，它会将所有内容都扔到徽标 div 下，然后图像不再响应。见here
哎呀。忘了提及将.badges-container 的父div.table-row 也更改为display: flex。在较小的尺寸下仍有一些碰撞，但垂直的东西已经没有问题了。

标签： html css wordpress responsive-design

【解决方案1】：

我设法解决了这个问题。我添加了一个单独的媒体查询，如下所示：

    @media screen and (max-width: 479px) {

    .badges-container {
    position: relative;
    text-align: center;
    margin-top: 0px

    }

    .badges img {
     width: 19%;
}

【讨论】：