当页面缩小时，如何将左 div 移到顶部？答案

【问题标题】：How do I have a left div shift to the top when the page shrinks?当页面缩小时，如何将左 div 移到顶部？
【发布时间】：2020-11-19 14:50:56
【问题描述】：

目前，我正在设计我的网站，但在放置组件时遇到了一些问题。我的主页上目前有两个主要的 div，其中一个是固定侧边栏（信息），另一个是内容（内容）。我想让它在窗口宽度缩小时，我的 div 不会被挤在一起。理想情况下，侧边栏（信息）移动到屏幕顶部，我的内容（内容）移动到它下方。附件是一张图片，描述了我当前的设置以及我想要实现的目标。任何帮助将不胜感激。

【问题讨论】：

虽然还有其他方式，但我们通常使用@media。
看起来很有希望。我会调查的，谢谢！

标签： html css reactjs

【解决方案1】：

这是我发现的最好的方法，

    #info{
        position:fixed;
        height:100vh;
        width:25vw;
    }
  
    #content{
        margin-left:25vh;
        height:100vh;
    }

    @media (max-width:800px) {
        .app #info {
            position:relative;
            display:block;
            height:30%;
        }
    }
    @media (max-width:800px) {
        .app #content {
            display:block;
            margin-left:0px;
            width:25vw;
        }
    }

我在 info 和 content 部分添加了一个 id 以分别格式化它们，并使用媒体查询 (@media) 在屏幕达到一定宽度后更改 div 的样式。我随意选择了max-width:800px，但是您可以将其更改为最适合您需要的任何内容。

【讨论】：

【解决方案2】：

您可能需要以下媒体查询：

@media (orientation: landscape){
   ...................
} 
@media (orientation: portrait){
   ...................
}

【讨论】：