響應式CSS;圖像移動到下一行而不是縮小

Question

我試圖爲手機做出響應頁面，當視口非常小時（即人像中的小屏幕），手機會作出響應。我在標題中有三個元素，菜單的「漢堡包」，徽標/主頁鏈接和籃子圖標。用戶能夠使用菜單和購物籃按鈕很重要，我試圖在視圖端口寬度太小而不能容納所有內容時使徽標縮小。

目前，當寬度縮小圖像下降到下一行，而不是縮小比例。

標記：

<header> 
    <div class="btn-menu"> 
    <a href="" id="menubutton"> 
     <img src="http://www.dabs.com/images/theme/mobile/dabs_com_v3/en/buttons/btn-menu3.png"> 
    </a> 
    </div> 
    <div class="btn-home"> 
    <a href="/" class="logo"> 
     <img alt="Home" src="http://www.dabs.com/images/theme/mobile/dabs_com_v3/en/layout/logo-new.png"> 
    </a> 
    </div> 
    <div class="btn-basket"> 
    <a href="/basket" id="basketbutton" class="header-button"> 
     <img alt="Basket" src="http://www.dabs.com/images/theme/mobile/dabs_com_v3/en/buttons/btn-basket2.png"> 
    </a> 
    </div> 
</header> 

CSS：

header { 
    position: relative; 
    text-align: center; 
    z-index: 10001; 
    background-color: #fff; 
    border-bottom: 8px solid #cc0033; 
    height: 48px; 
    overflow: hidden; 
    width: 100%; 
} 
header div.btn-home > a, img { 
    height: auto; 
    max-width: 100%; 
} 
div.btn-menu { 
    display: inline-block; 
    float: left; 
    width: 48px; 
} 
div.btn-home { 
    display: inline-block; 
    max-width: 199px; 
} 
div.btn-basket { 
    width: 60px; 
    display: inline-block; 
    float: right; 
    position: 
} 

BTN-菜單和BTN-籃上的固定寬度是故意的，我不希望他們改變，只有BTN家庭需求以響應視圖端口大小。

這裏是一個fiddle的例子。我添加了一個CSS寬度轉換按鈕來模擬視圖端口的縮小。在製作時，只需在風景和肖像之間進行切換時渲染到適當的尺寸並進行更改。 overflow：hidden被禁用以顯示圖像最終位置。

Answer 1

我把你的代碼修改了一下。 這裏是的jsfiddle解決方案：http://jsfiddle.net/rmdymm55/

說明：

我添加了一個最大高度的頭，但是這不是必需的，我只是做了它練出來的。

我完全去除這樣的：

header div.btn-home > a, img { 
    height: auto; 
    max-width: 100%; 
} 

，因爲我選擇了這種方式聲明它：

div.btn-home img { 
    max-width: 40%; 
    margin-left: -50px; 
} 

雙方應該工作，但我的是它的應用，其中多一點選擇。只有<div class="btn-home">內部的圖片。請注意我是如何做了margin-left：-50px的。當它縮小時，徽標仍然居中。真正的技巧包雖然是主頁按鈕的位置。你必須做到以下幾點上.btn家庭IMG：

display: inline; /* This will keep it in one line */ 
width: auto; /* for resizing */ 
height: auto; /* for resizing */ 
position: relative; /* to keep it in place */ 

對於div.btn籃您必須添加：

position: absolute; 

和div.btn菜單上你必須添加：

position: relative; 

這將正確定位圖像，使它們不會重疊，無縫移動，不會進入下一行。