如何并排创建4个div？

Question

我正在尝试创建一个标题窗格，就像您在 stackoverflow 页面顶部看到的那样，其中有一个图标，然后是页面标题，两者都左对齐，然后两个图标右对齐。我正在使用的方法（请随意启发我更好的方法）是一个 div，里面有 4 个 div。请参阅下面的 HTML 和 CSS 片段。

超文本标记语言

<div id="headerDiv">

    <div id="menuButtonDiv"><image src="resources/icons/menu.png" /></div>

    <div id="headerTitleDiv">

        <h1 style="padding-top: 6px">

            <ui:insert name="title">Default Title</ui:insert>

        </h1>

    </div>

    <div id="userButtonDiv"><image src="resources/icons/user.png" /></div>

    <div id="settingsButtonDiv"><image src="resources/icons/settings.png" /></div>

</div>

CSS

#headerDiv {

    margin-left: 0.5%;

    background-color: #00467e;

    color: white;

    width: 99%

}

#menuButtonDiv {

    float: left;

    background-color: #00467e;

    height: 50px;

    width: 50px;

}

#userButtonDiv {

    float: right;

    background-color: #00467e;

    height: 50px;

    width: 50px;

}

#settingsButtonDiv {

    float: right;

    background-color: #00467e;

    height: 50px;

    width: 50px;

}

#headerTitleDiv {

    vertical-align: middle;

    background-color: #00467e;

    height: 50px;

    margin-left: 75px;

}

但是，由于某种原因，右侧的两个按钮换行。见下图：

我究竟做错了什么？！

Answer 1

要使它们正确浮动，只需更改元素的顺序即可。浮动元素始终位于元素之前，而不会忽略<div id="headerDiv">&nbsp; &nbsp; <div id="menuButtonDiv"><image src="resources/icons/menu.png" /></div>&nbsp; &nbsp; <div id="userButtonDiv"><image src="resources/icons/user.png" /></div>&nbsp; &nbsp; <div id="settingsButtonDiv"><image src="resources/icons/settings.png" /></div>&nbsp; &nbsp; <div id="headerTitleDiv">&nbsp; &nbsp; &nbsp; &nbsp; <h1 style="padding-top: 6px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ui:insert name="title">Default Title</ui:insert>&nbsp; &nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</div>