Wordpress：向右浮动侧边栏无法正常工作

Question

http://www.guytgunterappliances.com/product-category/shop/

我的#container 当前位于 width:980px 并且我这边已将自己定位到容器 div 的底部。我试图将它浮动到我的容器 div 的右侧。我已将容器的宽度减小到 710px 以适应 270px 侧边栏，然后我浮动侧边栏。正如您在图像中看到的，它拉伸了侧边栏。它也在容器 div 上运行。

边栏

*************************************************************************/

#sidebar{

position:relative;

z-index:10;

width:270px;
 display:;

}

#sidebar,

#sidebar a,

#sidebar li,

#sidebar ul,

#sidebar ol{

    color:#787878;

    font-size:12px;
 display:;

}

#sidebar a:hover{

}

#sidebar ul{

    list-style:none;

    padding:0;

    margin:0;

}

    #sidebar ul li.widget{

        margin:0 0 0px 0;

        border:1px solid #fff;

        background: #e6e6e6;

    }

    #sidebar ul li.widget h2{

        font-size:18px;

        padding:13px 18px;

        color:#45494e;

        font-style:normal;

        border:1px solid #cecece;

        border-bottom:1px solid #fff;

    }

        #sidebar ul li ul{

            border:1px solid #cecece;

            border-bottom:none;

        }

            #sidebar ul li ul li{

                border-bottom:1px solid #cecece;

                padding: 10px 18px;

            }

            #sidebar ul li ul li:hover{

                border-bottom:1px solid #cecece;

                padding: 10px 18px;

                background:#eee;

            }

                #sidebar ul li ul li ul{

                    padding:0 0 0 15px;

                    border:none;

                }

                    #sidebar ul li ul li ul li{

                        border-bottom:none;

                        }

            /* TEXT WIDGET */

            #sidebar ul li div.textwidget{

                padding: 10px 18px;

                line-height:1.4em;

                border:1px solid #cecece;

            }

            /* TAG CLOUD */

            #sidebar ul li.widget_tag_cloud div{

                padding: 10px 18px;

                border:1px solid #cecece;

            }

                #sidebar ul li.widget_tag_cloud div a{

                    margin:0 10px 0 0;

                }

            /* CALENDAR */

            #sidebar ul li.widget_calendar{

                border:1px solid #fff;

            }

                #sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar{

                    padding: 10px 18px;

                    width:100%;

                    border:1px solid #cecece;

                    border-top:none;

                }

                    #sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar a{

                        text-decoration: underline;

                    }

                    #sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar caption{

                        padding: 5px 18px 0 18px;

                        border:1px solid #cecece;

                        border-bottom:none;

                    }

                    #sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar tr td#next{

                    text-align:right;

                    }

/************************************************************************

#  SIDEBAR END

Answer 1

解决这个问题需要几个步骤：

1. 您在主页上有两个divs，ID 为container，一个是内部的，一个是外部的。更改其中一个的 id。

2. 对于内部#container，添加：

   width: 710px;
   float: left;
   

3. 将#content 和iframe 的宽度减小到710px 或更小。

4. 最后，按照@KaronatoR 的建议设置#sidebar 的样式：

   width:270px;
   display: block;
   float: left;
   

Answer 2

试试吧：

#sidebar {
  width:270px;
  display: block;
  dloat: left;
}