响应式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; 

这将正确定位图像，使它们不会重叠，无缝移动，不会进入下一行。