html - 实现 Header 使其元素（徽标图像）具有屏幕大小

Question

当屏幕尺寸减小时，我正在尝试使标题中的徽标成为脚手架（向下堆叠）。目前我得到以下信息：

<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 中指定来做到这一点，float:left;并且clear:left;在使用 Adapt.js 时，您可以根据屏幕大小更改加载 css 文件。通过这种方式，您可以使 CSS 规则特定于布局。

确保包括 CSS 文件、JS 和初始化。

编辑 /*

这没有 JS 和一个简单的媒体查询http://jsfiddle.net/meeb0/mSTrQ/1/

Answer 2

我简化了你的 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;允许它在更小的屏幕尺寸下弯曲。