3

这就是我想做的：在网站顶部放置一个横幅，该横幅横跨整个网站。左侧是菜单，右侧是徽标图像；菜单向左浮动，图像向右浮动。

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

环境

body {
  min-width: 800px;
}

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

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

编辑：哦，亲爱的，我忘了提到一个相当重要的细节：顶部的菜单栏需要粘性。这就是我将position: fixed属性用于 DIV 的原因。其他页面内容应该在该菜单下滚动并移出窗口，请参见此处根据 ntgCleaner 的回答修改的小提琴。这种改变了整个事情，不是吗！对于那个很抱歉...

谢谢！

4

4 回答 4

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;
}
于 2012-12-11T23:25:00.883 回答
1

我改变了几件事：

  1. 我使您的横幅 DIV 成为一个容器，而不仅仅是一个自由浮动的 div。可能没有必要。
  2. 我给了那个横幅 div 一个 min-width: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;
}

    ​ ​</p>

这是小提琴

为已编辑的问题编辑：

您只需将标题下的所有内容放入 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;
}​

这是新的小提琴

于 2012-12-11T23:31:54.840 回答
0

当我看着你的小提琴时，我认为你的问题根本不是花车。 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 */
于 2012-12-11T23:27:36.843 回答
0

我更改了您的 HTML 以将<img>标签放在横幅内，并将 min-width 添加到了，#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; }

​</p>

于 2012-12-13T08:06:02.073 回答