响应式侧边栏 wordpress 主题答案

【问题标题】：responsive sidebar wordpress theme响应式侧边栏 wordpress 主题
【发布时间】：2014-02-07 12:46:01
【问题描述】：

我有以下内容，想知道是否有人可以帮助解释我应该如何使我的标记中的侧边栏折叠并放在 wordpress 博客主题中的主要内容下方。我感觉我可能需要特定的 media@ 查询，但不确定是什么。

这都是我试图从头开始建立的 wordpress 博客主题。有一个带有导航和图像的标题，我对此没有任何问题，但是，我需要一个主内容容器，其中的内容 div 用于向左浮动的文章和用于小部件的侧边栏 div 向右浮动。如果有人可以帮助我开始这个过程，我将永远感激不尽。

CSS 代码：

.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

#LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

body, html {
height: 100%;
}

#content{
display:inline-block;
float:left;
width:80%;
}

#sidebar{
display:inline-block;
float:left;
width:20%;


}



/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}



/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and     Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

HTML 代码

<body>
<!--HEADER, CONTENT, FOOTER-->
<div class="gridContainer clearfix">
<!--HEADER--> 
<div id="LayoutDiv1">
        <!--NAVIGAIION + LOGO-->
        <nav>
            <div class="header">

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

                    <!--navigation list items-->
                    <ul>
                        <li><a href="">home</a></li>
                        <li><a href="">about</a></li>
                        <li><a href="">contact</a></li>
                        <li><a href="">work</a></li>

                    </ul>


            </div>
        </nav>
        <!--end of NAVIGATION + LOGO-->


  <div id="LayoutDiv2" class="clearfix">

        <div id="content">

            <p> This is the Content</p>     

        </div>


        <aside>

            <div id="sidebar">

                <p> This is the Sidebar</p>

            </div>

        </aside>





  </div><!--end of LayoutDiv2-->





</div><!--end of LayoutDiv1-->




</div><!--end of Grid Container, HEADER, CONTENT, FOOTER-->


</body>

【问题讨论】：

谢谢，这正是我想要的。但是，现在我有一个进一步的询问。我在主要内容 div 中有内容，而侧边栏中显然有小部件，例如搜索表单。主 div 中的搜索表单输入和我的文本
内容正在转义并溢出各自的 div。当我添加填充时，div 也会与侧边栏 div 上方的内容 div 一起折叠。我能做些什么来纠正这个问题？

标签： html wordpress css sidebar fluid-layout

【解决方案1】：

您需要为您的内容和侧边栏写一个media query，例如：

@media (max-width: 600px) {
    #sidebar{ clear: both; width: 100%; }
    #content{ clear: both; width: 100%; }
}

这允许您将 div 放置在彼此下方，并使它们成为页面的整个宽度。

请参阅此JSFiddle 以获取工作示例。

【讨论】：