当屏幕尺寸减小时,我正在尝试使页眉中的 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>
最佳答案
我简化了您的 CSS。看起来你想做的太多了。
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 。
关于html - 实现页眉,使其元素( Logo 图像)与屏幕尺寸保持一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17658089/