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

Question

我遇到了这个问题，我试图将 6 个 div 排成一行，并且每个 div 都被用作一个 sprite。发生的事情是 2 个位于包含 div 内的顶部，另外 4 个位于包含 div 之外的下方。我已经研究过让每个 div 都 float ，其中包含宽度与 6 div 的宽度总大小相匹配的 div。我还发现另一个问题在这里使用 <br style="clear: left;" />在第六个 div 之后，但仍在包含的 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 -->

下图是它在浏览器中的样子。

Answer 1

你错过了这个。

#gateway {
    float: left;
}