css - 如何在使用页面灵活调整大小时将右侧边栏放在主要内容上？

Question

我有主要内容和右侧边栏的页面。但我想在页面调整大小的主要内容块之前有侧边栏。我怎样才能做到这一点？

HTML部分：

<div id="header">
    <div id="logo"></div>
</div>

<div id="container">

    <div id="content">
        main content
    </div>

    <div id="sidebar">
        sidebar
    </div>            

</div>

<div id="footer">
    footer
</div>

CSS部分：

#container {
    clear: both;
    overflow: auto;
}

#content {
    clear:both;
    width: 70%;
    float: left;
    padding: 2% 0;
    margin-right: 2%;
}

#sidebar {
    width: 28%;
    float: right;
    padding: 2% 0;
}

Answer 1

在您的媒体查询中浮动您的#sidebar左侧和#content右侧。

Answer 2

因为您正在尝试进行响应式设计，所以您想要做的是 CSS 中的媒体查询，这将允许您设置您想要进行的更改的样式。您必须做出的第一个决定是要显示响应式设计的屏幕尺寸。平板电脑的最大宽度通常为 760 像素，而手机的最大宽度约为 480 像素。所以媒体查​​询看起来像这样：

CSS：

@media screen and (max-width: 480px){
    ...all your mobile styles are in here...
}

现在来回答你的定位问题。当然有几种方法，我会这样做的方法是将侧边栏移动到 HTML 中的内容上方，clear从内容 CSS 中删除，然后在媒体查询中，您要做的就是为两者设置宽度分区100%。

HTML：

<div id="header">
    <div id="logo">The logo</div>
</div>

<div id="container">

    <div id="sidebar">
        sidebar
    </div>

    <div id="content">
        main content
    </div>
</div>

<div id="footer">
    footer
</div>

CSS：

#container {
    clear: both;
    overflow: auto;
}

#content {
    float:left;
    width: 50%;
    background:grey;
}

#sidebar {
    width: 25%;
    float:right;
    background:lightgrey;
}
@media screen and (max-width:480px){
    #sidebar {
        width:100%;
    }
    #content {
        width:100%;
    }
}