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中进行媒体查询，以便为您设置要进行的更改设置样式。您必须做出的第一个决定是要显示响应式设计的屏幕尺寸。平板电脑的最大宽度通常为760px，手机的最大宽度为480px。所以媒体查询看起来像这样：

CSS：

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

现在回答您的定位问题。当然有几种方法，我这样做的方法是将侧边栏移到HTML上的内容之上，从内容CSS中删除clear，在媒体查询中你只需要做的就是为两个div 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%;
    }
}

如何在页面灵活调整大小的主要内容上获得右侧栏？

2 个答案: