0

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
4

2 回答 2

0

试试这样：

#sidebar {
  width:270px;
  display: block;
  dloat: left;
}
于 2013-10-10T16:49:09.833 回答
0

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

  1. 您在主页上有两个div带有 id 的 s ，内部一个和外部一个。container更改其中之一的 id。

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

    width: 710px;
float: left;

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

  4. 最后，#sidebar@KaronatoR 建议的风格：

    width:270px;
display: block;
float: left;
于 2013-10-10T16:59:15.280 回答