Question

首次登上这些主板，请放心吧。

我一直试图通过使用媒体查询来使我的网站http://sartorialequity.com/做出响应。但是，我的右侧边栏目前显示在我的内容上方，而我希望它显示在我的内容的底部。

以下是我的代码的简化版本：

#container {
            width: 960px; 
            margin: auto;
        }

#content {
            width: 66.67%; 
        }

#sidebar {
            width: 260px;
            float: right;
            top: 70px; 
            position: relative;
        }

@media screen and (max-width: 768px) {
#container {
width: 91%
        }

#content {
float: none;
width: auto;
line-height: 135%;
       }

#sidebar {
float: none;
width: auto;
top: 10px;
       }

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

到目前为止我尝试过的解决方案：

1。使用display：table-footer-group

#content-sidebar-wrap {display:table;}
#content {display:table-header-group; float: none; width: auto}
#sidebar {display:table-footer-group; float: none; width: auto}

在手机上，这成功地让侧边栏显示在内容下方，至少在主页上。但是，它导致PermaLink Pages的内容和侧边栏超出了标题的宽度。

2。重新排列div id =“sidebar”和div id =“content”

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

在手机上，这成功地让侧边栏显示在内容下方。但是，当我在PC的浏览器窗口中时，它会导致侧边栏出现在页面底部。

我真的很感激任何建议。谢谢！

Answer 1

内容外观不仅仅与原始html的顺序有关。样式可以带来很多变化。

首先尝试使用此布局：

<div id="content"></div> // Content div comes first 
 <div id="sidebar"></div> // Then Comes Sidebar.

请注意，此布局并不意味着您不能将侧边栏用于页面。如果content div没有浮动，sidebar将在content之后，在页面底部，浮动到右边。因此，您必须将content div向左浮动，这将导致33.3334％的空间正确，将由sidebar填充。但对于移动设备，由于您已将float:none设置为两个div，原始html的顺序本身将起到侧边栏到底部的作用。

因此，尝试一些小的风格变化：

    #content {
    float: left; //This line will bring the change. It is necessary.
    width: 66.67%;
    width: calc(100% - 294px); //you may or may not add this line 
    height: 100%;
    font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New    Roman', serif;
    line-height: 160%;
}

Answer 2

内容div应该是标记中的第一个。这将解决你的问题。

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

如何让我的侧边栏显示在响应式网页的底部？

2 个答案: