html - float 时Div和Button元素碰撞

Question

我有以下代码

<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 上，我将 site-branding 设置为向左浮动，然后将 menu-toggle 设置为向右浮动。在正常分辨率下，显示效果很好。品牌位于标题的左侧，菜单切换按钮位于右侧，但当屏幕变小时，我希望菜单切换按钮位于网站品牌 div 下方，但我得到的行为是菜单-toggle 与网站品牌 div 发生冲突。任何想法如何解决这个问题？谢谢。

Answer 1

Float 将忽略元素的碰撞框。当屏幕太小时，您将不得不使用媒体查询将新的 CSS 应用到您的标题。

例如，如果您的品牌是 300 像素宽，而您的切换是 60 像素宽，您应该使用 max-width: 360px 的媒体查询，定位另一个 CSS 文件，该文件将把切换放在您的下方品牌形象。