html - 修复 HTML 中的左右浮动图像

Question

这是我想要做的:在网站顶部放置一个横跨整个网站的横幅。左边是菜单，右边是logo图片；菜单向左浮动，图像向右浮动。

问题是浏览器窗口的大小调整。因为图像向右浮动，所以它会随着窗口变小而正确移动。但是，在某些时候它开始 float 到菜单中。 Here是一个用两个 float 图像说明这种效果的 fiddle 。调整浏览器窗口大小以查看两个图像如何重叠。

设置

body {
  min-width: 800px;
}

我现在可以确保滚动条在浏览器窗口达到某个最小宽度时出现。但是，这并不妨碍右侧 float 图像随着浏览器窗口不断变小而继续移动。我尝试更改 position: relative 但没有成功。我尝试在浏览器窗口达到其 min-width 后使用 Javascript 固定图像，但这似乎也没有影响。在 DIV 上使用 min-width 并使图像成为 DIV 的子项也不起作用。

我的问题是:如何确保从特定窗口大小开始，右侧 float 图像保持原样而不是 float 到左侧 float 菜单中？

编辑:天哪，我忘了提一个相当重要的细节:顶部的菜单栏需要有粘性。这就是我为 DIV 使用 position: fixed 属性的原因。其他页面内容应该在该菜单下滚动并超出窗口，请参阅修改后的 fiddle here这是基于 ntgCleaner 的回答。这种改变了整个事情，不是吗!对不起...

谢谢!

Answer 1

我改变了几件事:

1. 我将您的横幅 DIV 变成了一个容器，而不仅仅是一个自由 float 的 div。可能没有必要。
2. 我给横幅 div 设置了最小宽度:280px 并使其溢出:隐藏；

3. 我让图像只是左右浮动，而不是相对定位或绝对定位(因为它现在位于 div 容器中)。

   #banner {
   left: 0px;
   top: 0px;
   width: 100%;
   height: 60px;
   background-color: lightblue;
   z-index: 1;
   opacity: 0.8;
   overflow:hidden;
   min-width:280px;
   }
   
   #left {
   float:left;
   margin:5px;
   height:40px;
   }
   
   #right {
   float:right;
   margin:5px;
   height:40px;
   }
   

Here's the fiddle

针对已编辑的问题进行了编辑:

您只需将标题下的所有内容放入一个 div 中，然后为该 div 提供固定 div 高度的上边距。在这种情况下，它是 60px。

将此添加到您的 HTML

<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>

然后将其添加到您的 CSS 中

#content {
    margin:60px 0px 0px 0px;
}​

Here's the new fiddle