浮动和高度

Question

浮动和高度

我有一个名为footerWrap的div,它包含3个无序列表.我向左浮动,所有无序列表.

我的目的是根据无序列表的高度使footerWrap高度增长.但是...在所有浏览器中(例如IE6),无序列表会传递div ...就像他们有z-index属性一样!

我试图在最后放置一个div,清楚:all,我也尝试在div上创建float:none#footerWrap

这是我的Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Run Code Online (Sandbox Code Playgroud)

这是我的完整CSS代码:

div#footerWrap
{
    height:180px;
    background-color:#5c5c5c;
    background-image:url('../../img/bgFooter.png');
    background-repeat:repeat-x;
    background-position:top;
    padding-top:20px;
    padding-left:15px;
    margin-top:20px;
}



    /* menus footer */
    div#footerWrap ul#mainMenu,
    div#footerWrap ul#myMenu,
    div#footerWrap ul#othersMenu
    {width:180px; float:left;}

        div#footerWrap ul#mainMenu li a,
        div#footerWrap ul#myMenu li a,
        div#footerWrap ul#othersMenu li a 
        {
            color:#dadada;
            text-decoration:none;
            padding:5px;
        }

            div#footerWrap ul#mainMenu li a,
            div#footerWrap ul#othersMenu li a
            {padding:5px 10px;}

            /* hover */
            div#footerWrap ul#mainMenu li a:hover,
            div#footerWrap ul#othersMenu li a:hover
            {color:#fff; background-color:#666;}


    /* menu principal */
    div#footerWrap ul#mainMenu {margin-top:-10px;}

        div#footerWrap ul#mainMenu li{line-height:24px;}       

        /* /menu principal */



        /* o meu menu*/
        div#footerWrap ul#myMenu {margin-left:15px;}

            div#footerWrap ul#myMenu li {color:#fff; line-height:22px;}

                    div#footerWrap ul#myMenu li.myMenuItem a 
                    {
                        background-image:url('../../img/smallArrow.gif');
                        background-repeat:no-repeat;
                        background-position:left 7px;
                        padding-left:15px;
                        padding-right:20px;
                    }

                        div#footerWrap ul#myMenu li.myMenuItem a:hover
                        {color:#fff; background-color:#666;}                
        /* /o meu menu */



        /* outros menu */
        div#footerWrap ul#othersMenu {margin-left:300px; width:340px;}

            div#footerWrap ul#othersMenu li 
            {
                color:#fff;
                line-height:22px;
            }

                div#footerWrap ul#othersMenu li a{margin-left:5px;}
                div#footerWrap ul#othersMenu li a span {margin-left:-5px;}

        /* /outros menu */

Run Code Online (Sandbox Code Playgroud)

这是我的XHTML代码:

       <div id="footerWrap">

            <!-- menu principal -->
            <ul id="mainMenu">
                <li><a href="#">item</a></li>
            </ul>


            <!-- o meu menu -->
            <ul id="myMenu">
                <li>meu menu</li>
                <li class="myMenuItem slideMenuItem"><a href="#">item</a></li>
            </ul>


            <!-- outros menu -->
            <ul id="othersMenu">
                <li><span>outros</span></li>
                <li><a href="#">item</a></li>
            </ul>

        </div>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 8

你不需要height: 180px;上#footerWrap.浮动3 ul左侧是好的,但你需要清除它们.

添加.clear {clear:both;}到您的CSS.<div class="clear"></div>在关闭#footerWrapdiv 之前添加.

您也可以尝试加入position: relative;到#footerWrap并添加div#footerWrap ul {display: block;}到您的CSS.

归档时间：	16 年前
查看次数：	9357 次
最近记录：	13 年，5 月前