html - 响应式行为的样式

Question

我敢肯定这对很多人来说都是婴儿用品，但恐怕我就是做不好。我调整的越多，我得到的结果就越远。无需描述我的努力的结果。取而代之的是视口(viewport)缩小时的预期效果:

下面的图片不是我实际制作的；这就是我想要发生的事情。相反，除了这个，我让元素做所有事情，最烦人的是图像下的文本换行。

如果有人能为我指出最有效的代码，包括媒体查询，我将不胜感激。

Answer 1

我相信你在你的 CSS 中使用了 @media 查询，所以除非另有说明，否则我会假设这一点。

你可以这样看:

将元素 2 和 3 的 display 属性设置为 inline-block。

然后，当视口(viewport)宽度超过 600 像素(桌面/平板电脑)时，将元素 2 和 3 的宽度设置为 50%。这将使他们并排坐下。

注意:您可能需要使用 box-sizing: border-box; 才能正常工作；取决于您是否使用边框。

然后，在小于 600 像素的媒体查询(对于移动设备)中，将元素 2 和 3 的 width 设置为 100% 以填充屏幕的宽度。

这将使它们整齐地层叠在一起。

此外，我建议您考虑使用 Bootstrap因为这使得响应式网站编码变得轻而易举。

希望这对您有所帮助!