事业部和浮动

当Button元素的碰撞，我有以下代码事业部和浮动

<div class="site-branding"> 
    <h1 class="site-title"><a href="http://localhost/Test/"  rel="home">Test</a></h1> 
</div> 

<button class="menu-toggle" aria-controls="primary-navigation" aria-expanded="false">Navigation</button>

在我的CSS，我把网站的品牌漂浮离开，然后菜单切换浮动权。在正常分辨率下，显示效果很好。品牌位于标题的左侧，菜单切换位于右侧，但当屏幕变小时，我希望菜单切换按钮位于网站品牌广告的下方，但我得到的行为是菜单-toggle与网站品牌的div碰撞。任何想法如何解决这个问题？谢谢。

来源

2015-09-21 django1001

在问题中弹出您的CSS。 –

下面是一个例子，如果你飘起这些元素有哪些呢发生的情况：

.headline { 
 
    float: right; 
 
} 
 
.btn { 
 
    float: left; 
 
}

<div> 
 
    <h1 class="headline">Some link to your homepage</h1> 
 
</div> 
 
<button class="btn">some button</button>

（按全屏和调整您的浏览器窗口）
按钮元件浮标题下方。

现在你可以添加按钮和网站标题的CSS类吗？

来源

2015-09-21 08:21:56 Persijn

如果按以下方式重写，您将会得到满意的答案。您只需调整div的宽度即可。

的CSS

.FloatClass {浮动：左;}

的Html

<div class="FloatClass"> 
     <h1 class="headline">Some link to your homepage</h1> 
    </div> 
<div class="FloatClass"> 
    <button class="btn">some button</button> 
</div>

所有最优秀的

来源

2015-09-21 08:25:27

浮动会忽略元素的碰撞盒。当屏幕太小时，您将不得不使用媒体查询将新的CSS应用到标题。例如，如果您的品牌宽度为300像素，而您的切换宽度为60像素，则应使用媒体查询max-width: 360px，定位另一个CSS文件，该文件将切换到您的品牌形象下方。

来源

2015-09-21 08:26:40

事业部和浮动

回答

相关问题