实施标题，以便其屏幕尺寸为

的元素（徽标图像）脚手架当屏幕尺寸减小时，我试图将标题中的徽标标记为脚手架（向下堆叠）。目前，我得到如下： enter image description here 实施标题，以便其屏幕尺寸为

<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>

来源

2013-07-15 secuaz

请澄清和/或提供一个JSFiddle –

刚刚添加一张图片来尝试澄清，是吗？谢谢 – secuaz

我们将需要使用的CSS，所以如果你可以创建一个JSFiddle，这将有助于 –

我简化你的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;可以在较小的屏幕尺寸下弯曲。

来源

2013-07-15 20:35:20 hungerstar

非常感谢！ – secuaz

您可以通过CSS float:left;和clear:left;指定同时使用Adapt.js你可以改变负荷的CSS做文件依赖于屏幕尺寸。这样您可以制作特定于布局的CSS规则。

确保包含CSS文件，JS和初始化。

编辑/ *

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

来源

2013-07-15 15:59:07 m33bo

感谢您的回答！我不知道如何使用clear：left（即阻止元素位于另一个元素的左侧）。一个jsFiddle会有所帮助。谢谢！ – secuaz

我编辑了链接。它非常简单，没有JS，但它适用于媒体查询。如果您正在构建非CSS3浏览器，请使用JS。 – m33bo

你必须调整浏览器的工作方式..只是一个侧面说明..它应该把元素变成蓝色。：D – m33bo

实施标题，以便其屏幕尺寸为

回答

相关问题