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

Answer 1

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

例如，如果您的品牌展示宽度为300px且切换宽度为60px，则应使用max-width: 360px的媒体查询，定位另一个CSS文件，将切换放置在品牌形象下方。

Answer 2

以下是浮动这些元素时会发生什么的示例：

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

{{1}}

（按全屏并调整浏览器窗口大小）
按钮元素浮动在标题下方。

现在可以为按钮和网站标题添加css类吗？

Answer 3

如果按照以下方式重写，您将获得所需的答案。您只需根据需要调整div的宽度即可。

<强>的CSS

.FloatClass {float：left;}

<强> HTML

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

一切顺利

浮动时Div和Button元素发生碰撞

3 个答案: