当调整窗口大小时，如何阻止div移动到彼此之下？

Question

我的网页顶部有一个横跨整个宽度的包装。

当我最小化页面时，其中有一个徽标（向左浮动）一个导航栏（居中）和一些社交媒体按钮（向右浮动），我希望所有项目保持原样（相对于页面。即navbar保持中心，社交按钮向右浮动，直到他们相遇。

此时我希望它们实际上保持原样（就像它现在是一个固定的布局），因为页面继续变小。目前，当他们见面时，社交媒体按钮移动到导航栏下方，然后导航栏移动到徽标下方。

这里有一个例子：

Answer 1

如果您使用浮点数，那么如果他们需要的空间大于可用空间，他们将换行到新行。因此，如果您想要防止这种情况，您需要最小化包装器本身。

如果你知道标题中三个项目的宽度，那么你应该在标题包装上放置一个最小宽度。

您也可以不使用浮点数，但选择让徽标和社交媒体按钮具有position: absolute。中间的菜单应该左右边距与图像/按钮一样宽。

HTML：

<div class="navbar">
    <img src="http://lorempixel.com/50/50/sports/1/" />
    <ul id="menu">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
    </ul>
    <ul id="social">
        <li>social 1</li>
        <li>social 2</li>
    </ul>
</div>

和CSS：

.navbar{ 
    position: relative;
    height: 50px; 
    min-width: 370px;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
img {
    position: absolute; 
    left: 0;
    top: 0;
    width: 50px;
}
#menu {
    margin: 0 100px 0 50px;
    text-align: center;
    min-width: 220px;
}
#social {
    position: absolute; 
    width: 100px;
    right: 0;
    top: 0;
}

这是绝对方法的一个例子：http://jsfiddle.net/Yt989/3/