问修复HTML中的左右浮动图像

EN

我改变了几件事：

1. 我让你的横幅div变成了一个容器，而不仅仅是一个自由浮动的DIV。我给那个banner div设置了一个最小宽度:280px，并让它变成了overflow:hidden;
2. I，让图像只左右浮动，而不是相对或绝对地定位(因为它现在在
3. 容器中)。

#banner { left: 0px；top: 0px；width: 100%；height: 60px；background-color: lightblue；z-index: 1；不透明度: 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

这就是你想要的吗？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;
}

当我看着你的小提琴时，我想你的问题根本不是花车。position:fixed取代了float。这两个元素根本不是浮动的，它们在一个固定的位置(类似于绝对位置)，这就是为什么当它们没有足够的空间时它们会重叠。

去掉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 */