html - 实现页眉，使其元素( Logo 图像)与屏幕尺寸保持一致

Question

当屏幕尺寸减小时，我正在尝试使页眉中的 Logo 成为脚手架(向下堆叠)。目前我得到以下信息:

<div id="header_inner">
<div class="logo"><a rel="home" href=""><img src="/logoShort1.png" alt=""></a></div><!-- .logo -->
<div id="header_extras"><div id="header_extras_inner"><div class="header_social"><div class="social_icon awake_dark"><a href="https://twitter.com/"><img src="twitter.png" alt=""></a></div><div class="social_icon awake_dark"><a href="https://www.facebook.com/pages/1?fref=ts"><img src="http://10.10.1.202//facebook.png" alt=""></a></div><div class="social_icon awake_dark"><a href="mailto:info"><img src="http:///email.png" alt=""></a></div></div></div><!-- #header_extras_inner -->
</div>               
<div id="logoMob" class="headerStack"><img src="/logoMobPhone.png"></div>
<div id="logoLand" class="headerStack"><img src="/logoLandline.png"></div>                
 </div>

Answer 1

我简化了您的 CSS。看起来你想做的太多了。

http://jsfiddle.net/WtZad/1/

CSS

#header_inner {
     min-width: 900px;
     margin: 0 auto;
}
#header_inner > div {
     float: left;
     margin: 5px;  /* add some space around them */
}

使用 width: 900px; 的设置宽度将创建一个水平滚动条。使用 max-width: 990px​​; 允许它在较小的屏幕尺寸下 flex 。