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

Question

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

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

这是当前的媒体查询：

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

这是 link 到 jsfiddle 这将证明我的困境。如果有人能告诉我问题出在哪里，我将不胜感激。

Answer 1

首先您需要在媒体查询中重新设置左边距和宽度：

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

其他元素类似。

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

Use media query to order div elements vertically when page gets smaller