Question

我有这个问题，试图连续放6个div，每个div都被用作精灵。发生的事情是2是在包含div中保持在顶部而另外4个在包含div之外。我已经研究过使每个div浮动，其中包含宽度的div，以匹配6 div的宽度总大小。我还发现另一个问题是在第六个div之后使用<br style="clear: left;" />但是仍然在包含div中，但这似乎不能解决我的问题。这个包含div也在页脚div内部。

的CSS：

#footer {
    width: 100%;
    height: 135px;
    background-color:#444;}

#sprite {
    margin: 0 auto;
    width: 602px;
    height: 35px;
    /*background-image: url(images/sprite.png);
    background-repeat: no-repeat;
    background-position: left top;*/
}


#ash {
    width: 113px;
    height: 35px;
    float: left;
    background: url(images/images/sprite1_01.png) no-repeat 0 0;
}

#ash:hover {
    background-position:0 -35px;

}

#gateway {
    margin: 0 auto;
    width: 113px;
    height: 35px;
    background: url(images/images/sprite1_02.png) no-repeat 0 0;
}

#gateway:hover {
    background-position:0 -35px;

}

#conect {
    width: 113px;
    height: 35px;
    float: left;
    background: url(images/images/sprite1_03.png) no-repeat 0 0;
}

#conect:hover {
    background-position:0 -35px;

}

#peninsula {
    width: 113px;
    height: 35px;
    float: left;
    background: url(images/images/sprite1_04.png) no-repeat 0 0;
}

#peninsula:hover {
    background-position:0 -35px;

}

#aza {
    width: 75px;
    height: 35px;
    float: left;
    background: url(images/images/sprite1_05.png) no-repeat 0 0;
}

#aza:hover {
    background-position:0 -35px;

}

#greenscape {
    width: 75px;
    height: 35px;
    float: left;
    background: url(images/images/sprite1_06.png) no-repeat 0 0;
}

#greenscape:hover {
    background-position:0 -35px;

}

HTML：

<div id="sprite">


            <div id="ash">

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

            <div id="gateway">

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

            <div id="conect">

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

            <div id="peninsula">

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

            <div id="aza">

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

            <div id="greenscape">

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


        <br style="clear: left;" />


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

下面是一张如何坐在浏览器中的图片。

enter image description here

Answer 1

你错过了这个。

#gateway {
    float: left;
}

如何将6个div放在同一行？

1 个答案: