使用媒体查询在 row/two 行中显示图像时遇到问题

Question

我想要一个响应式页面，如果屏幕足够大，我的登录图像将显示在一行上，否则，它们会分两行显示。所以我有这个 HTML

<div id="loginBox">
    <div>Login/Sign Up</div>
    <div id="loginLogos">
            <div id="row1">
        <a href="/auth/google"><img border="0" alt="Google" src="http://www.racertracks.com/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg"></a>
                <a href="/auth/facebook"><img border="0" alt="Facebook" src="http://www.racertracks.com/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png"></a>
    </div>
    <div id="row2">
                <a href="/auth/twitter"><img border="0" alt="Twitter" src="http://www.racertracks.com/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png"></a>
        <a href="/auth/linkedin"><img border="0" alt="LinkedIn" src="http://www.racertracks.com/assets/linkedin-1d4c0d36adcec44fd86c11c47834e51e3f3226b623f91a2f215993633956e431.png"></a>
    </div>
    </div>
</div>

然后我使用媒体查询尝试做我想做的事......

#one {
    float:left;
}

@media screen and (max-width: 400px) {
   #one {
    float: none;
  }
}

但是，在正常屏幕尺寸下，图像会分成两行而不是一行 — https://jsfiddle.net/ocdz4bsp/。对于小屏幕，它们正确地换行成两行。对于超过 400 像素的屏幕尺寸，如何将所有内容都放在一行中？

Answer 1

如果您希望 2 个元素并排，请使用 display: inline-block 如果您希望它们相互堆叠，请使用 display: block

这是更正后的 fiddle：https://jsfiddle.net/ocdz4bsp/1/

希望对您有所帮助。

Answer 2

您真的不需要任何媒体查询来实现您想要的效果。通过正确使用浮动，项目将在需要时自行堆叠。参见 here

#row1, #row2 {
    float:left;
}

#row1 {
  margin-right: 5px;
}

如果您设置了 @media 个查询，那么您可以执行以下操作：

#row1, #row2 {
    float:left;
}

#row1 {
  margin-right: 5px;
}

@media only screen and (max-width: 400px) {
    #row1, #row2 {
        float: none;
        margin-right: none;
    }
}

使用媒体查询在 row/two 行中显示图像时遇到问题

Having trouble displaying images in one row/two rows using media queries

html

css

media-queries

display