html - 当页面变小时，使用媒体查询垂直排列 div 元素

Question

我正在为一个网站设计一个组件，它是一个固定的内联 block 。它目前在普通尺寸的屏幕上看起来不错，但当屏幕变小时，事情就变得奇怪了。我曾尝试使用媒体查询来更改某些 CSS 属性以使所有 div 垂直排列。这似乎不起作用。

此外，在这个 block 的底部有一个额外的 10px，我尝试通过多种方式将其删除，但它不会消失，除非我在较大的外部 div 上将高度设置为 300px。现在我正在尝试使用 calc 函数将其删除，但没有成功。如果有人也知道解决该问题的方法，那就太棒了。

这是当前的媒体查询:

@media (max-width: 500px){
    #orange-block-right, #orange-picture{
     float: left;
     display: inline;
   }}

这是 jsfiddle 的链接这将证明我的困境。如果有人能让我知道问题出在哪里，我将不胜感激。

Answer 1

首先，您需要在媒体查询中重置左边距和宽度:

#orange-block-right {
    width: 100%;
    margin-left: 0;
}

其他元素类似。

除此之外，删除那些 float 和内联属性，将所有这些元素定义为 block 并将其内容居中。