如何在窗口大小調整時阻止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/