Question

这就是我想要做的事情：在网站的顶部竖起横幅，横跨整个网站。左边是菜单，右边是徽标图像;菜单向左浮动，图像浮动。

问题是调整浏览器窗口的大小。因为图像浮动正确，所以它随着窗口变小而正确移动。但是，在某些时候它开始浮动到菜单中。 Here是一个小提琴，通过两个浮动图像来说明这种效果。调整浏览器窗口的大小以查看两个图像的重叠方式。

设置

body {
  min-width: 800px;
}

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

我的问题是：我怎样才能确保从某个窗口大小开始，右浮动图像保持不变而不是浮动到左浮动菜单中？

编辑：哦，亲爱的，我忘了提一个相当重要的细节：顶部的菜单栏需要粘性。这就是我为DIV使用position: fixed属性的原因。其他页面内容应该在该菜单下滚动并在窗口外滚动，请参阅基于ntgCleaner答案的修改过的小提琴here。这种改变整个事情，不是吗！对不起...

谢谢！

Answer 1

这就是你追求的吗？ http://jsfiddle.net/9wNEx/10/

您没有正确使用position: fixed。固定意味着“相对于视口或浏览器窗口定位”，这正是您所遇到的。

我从图片中删除了position: fixed，然后将它们放在div中。这应该使它们始终位于页面顶部，因为它们位于仍然固定的div内。

我还调整了一些其他样式来复制你的例子。请注意，我删除了头部的固定高度，并用填充底部替换它。这样，只要屏幕尺寸变小并且图像被强制在彼此之下，高度就会跟随内容。

css现在看起来像这样：

#banner {
    left: 0px;
    top: 0px;
    width: 100%;
    padding-bottom: 15px;
    background-color: lightblue;
    z-index: 1;
    position: fixed;
    opacity: 0.8;
}

#left {
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    height: 40px;
}

#right {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    height: 40px;
}

Answer 2

我改变了几件事：

我把你的横幅DIV变成了一个容器，而不仅仅是一个自由浮动的div。可能没必要。
我给了那个横幅div一个最小宽度：280px并使它溢出：隐藏;

我让图像只是向左和向右浮动，而不是相对或绝对定位（因为它现在位于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高度的上边距。在这个caes中，它是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

Answer 3

当我看到你的小提琴时，我认为你的问题根本不是浮子。 position:fixed取代浮动。这两个元素根本不浮动，它们处于固定位置（类似于绝对位置），这就是为什么它们在没有足够空间时重叠的原因。

取出float:left和float:right，结果将是相同的。此外，top，left，bottom和right不适用于非定位元素。所以它们在你的横幅上是多余的。

但是，如果使用浮动，当没有足够的空间时，右侧图像会在左下方包裹。见http://codepen.io/morewry/pen/rjCGd。假设图像的高度仅为jsfiddle测试设置，您只需要：

.banner {
    padding: 5px; /* don't repeat padding unnecessarily */
    min-width: ??; /* to keep floats from wrapping, set one */
    overflow: hidden; /* clearfix */
}

.right { float: right; } /* only need one float, don't over-complicate it with two */

Answer 4

我更改了您的HTML，将<img>标记放在横幅内，并将最小宽度添加到#banner，因为它有position: fixed。如果您希望整个页面具有最小宽度，则仍需要将min-width添加到body或包装所有其他元素的容器。

http://jsfiddle.net/Wexcode/s8bQL/

<div id="banner">
    <img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
    <img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>

#banner {
    width: 100%;
    min-width: 800px;
    height: 60px;
    background-color: lightblue;
    z-index: 1;
    position: fixed;
    opacity: 0.8; }

#left {
    float: left;
    margin: 5px 0 0 10px;
    height: 40px; }
#right {
    float: right;
    margin: 5px 10px 0 0;
    height: 40px; }

修复HTML中的左右浮动图像

4 个答案: