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

Question

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

当我最小化页面时，我想让所有的项目都保持在原来的位置（相对于页面而言），即它是一个徽标（浮动左侧），一个导航栏（居中）和一些社交媒体按钮（右侧浮动）。导航栏保持居中，社交按钮右移）直到他们相遇。

在这一点上，我希望它们实际上保持它们的位置（就像它现在是一个固定的布局），因为页面越来越小。目前，当他们见面时，社交媒体按钮移动到导航栏下方，然后导航栏移动到标志下方。

这里的一个例子：

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/